<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe</title>
    <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
    <script>
        function init() {
            var stage = new createjs.Stage("demoCanvas");
            var circle = new createjs.Shape();
            circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
            circle.x = 100;
            circle.y = 100;
            stage.addChild(circle);
            stage.update();
        }
    </script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200"></canvas>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe</title>
    <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
    <script>
        function init() {
            var stage = new createjs.Stage("demoCanvas");
            var circle = new createjs.Shape();
            circle.graphics.beginFill("Purple").drawCircle(0, 0, 50);
            circle.x = 100;
            circle.y = 100;
            stage.addChild(circle);
//            stage.update();

            createjs.Tween.get(circle, { loop: false })
                    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
                    .to({ alpha: 0, y: 75 }, 500, createjs.Ease.getPowInOut(2))
                    .to({ alpha: 0, y: 125 }, 100)
                    .to({ alpha: 1, y: 100 }, 500, createjs.Ease.getPowInOut(2))
                    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

            createjs.Ticker.setFPS(60);
            createjs.Ticker.addEventListener("tick", stage);



        }
    </script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200"></canvas>
</body>
</html>


Change color of circle to Purple and add animation
Change color of circle to Purple and add animation
