Learn CREATEJS with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple CreateJS Animation

# createjs/demo/index.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('red').drawCircle(0, 0, 50);
        circle.x = 50;
        circle.y = 300;
        stage.addChild(circle);

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        circle.x += 2;
        if(circle.x > 800) circle.x = 0;
        stage.update();
        });
        </script>
    </body>
</html>

A basic CreateJS program that draws a circle and animates it moving across the canvas.

Let’s Try →

CreateJS Bouncing Ball

# createjs/demo/bouncing_ball.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const ball = new createjs.Shape();
        ball.graphics.beginFill('blue').drawCircle(0, 0, 30);
        ball.x = 400;
        ball.y = 100;
        stage.addChild(ball);

        let speed = 5;
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        ball.y += speed;
        if(ball.y > 570 || ball.y < 30) speed *= -1;
        stage.update();
        });
        </script>
    </body>
</html>

A ball bouncing vertically on the canvas.

Let’s Try →

CreateJS Rotating Square

# createjs/demo/rotating_square.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const square = new createjs.Shape();
        square.graphics.beginFill('green').drawRect(-50, -50, 100, 100);
        square.x = 400;
        square.y = 300;
        stage.addChild(square);

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        square.rotation += 2;
        stage.update();
        });
        </script>
    </body>
</html>

A square that rotates continuously.

Let’s Try →

CreateJS Moving Rectangles

# createjs/demo/moving_rects.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const rects = [];
        for(let i=0; i<5; i++) {
        const r = new createjs.Shape();
        r.graphics.beginFill('orange').drawRect(0, 0, 60, 60);
        r.x = i*150;
        r.y = 300;
        stage.addChild(r);
        rects.push({shape: r, speed: i+1});
        }

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        rects.forEach(r => {
        r.shape.x += r.speed;
        if(r.shape.x > 800) r.shape.x = -60;
        });
        stage.update();
        });
        </script>
    </body>
</html>

Multiple rectangles moving horizontally at different speeds.

Let’s Try →

CreateJS Color Change

# createjs/demo/color_change.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('red').drawCircle(0, 0, 50);
        circle.x = 400;
        circle.y = 300;
        stage.addChild(circle);

        const colors = ['red','blue','green','orange','purple'];
        let index = 0;
        setInterval(() => {
        index = (index+1) % colors.length;
        circle.graphics.clear().beginFill(colors[index]).drawCircle(0,0,50);
        stage.update();
        }, 1000);
        </script>
    </body>
</html>

A circle that changes color every second.

Let’s Try →

CreateJS Draggable Circle

# createjs/demo/draggable_circle.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('cyan').drawCircle(0, 0, 50);
        circle.x = 400;
        circle.y = 300;
        circle.cursor = 'pointer';
        circle.on('pressmove', (evt) => { circle.x = evt.stageX; circle.y = evt.stageY; stage.update(); });
        stage.addChild(circle);
        stage.update();
        </script>
    </body>
</html>

A draggable circle using mouse events.

Let’s Try →

CreateJS Rotating Multiple Shapes

# createjs/demo/rotating_shapes.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const shapes = [];
        for(let i=0; i<3; i++) {
        const s = new createjs.Shape();
        s.graphics.beginFill(['red','green','blue'][i]).drawRect(-25,-25,50,50);
        s.x = 200 + i*200;
        s.y = 300;
        stage.addChild(s);
        shapes.push({shape: s, speed: i+1});
        }

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        shapes.forEach(s => s.shape.rotation += s.speed);
        stage.update();
        });
        </script>
    </body>
</html>

Multiple shapes rotating at different speeds.

Let’s Try →

CreateJS Fading Circle

# createjs/demo/fading_circle.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('magenta').drawCircle(0,0,50);
        circle.x = 400;
        circle.y = 300;
        stage.addChild(circle);

        let alpha = 1, fadingOut = true;
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        if(fadingOut) alpha -= 0.01; else alpha += 0.01;
        if(alpha <= 0) fadingOut = false;
        if(alpha >= 1) fadingOut = true;
        circle.alpha = alpha;
        stage.update();
        });
        </script>
    </body>
</html>

A circle that fades in and out continuously.

Let’s Try →

CreateJS Scaling Circle

# createjs/demo/scaling_circle.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('yellow').drawCircle(0,0,50);
        circle.x = 400;
        circle.y = 300;
        stage.addChild(circle);

        let scaleUp = true;
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        if(scaleUp) circle.scaleX += 0.01; else circle.scaleX -= 0.01;
        circle.scaleY = circle.scaleX;
        if(circle.scaleX >= 2) scaleUp = false;
        if(circle.scaleX <= 0.5) scaleUp = true;
        stage.update();
        });
        </script>
    </body>
</html>

A circle that continuously grows and shrinks.

Let’s Try →

Code Sample Descriptions

Simple CreateJS Animation

# createjs/demo/index.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('red').drawCircle(0, 0, 50);
        circle.x = 50;
        circle.y = 300;
        stage.addChild(circle);

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        circle.x += 2;
        if(circle.x > 800) circle.x = 0;
        stage.update();
        });
        </script>
    </body>
</html>

A basic CreateJS program that draws a circle and animates it moving across the canvas.

Let’s Try →

CreateJS Bouncing Ball

# createjs/demo/bouncing_ball.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const ball = new createjs.Shape();
        ball.graphics.beginFill('blue').drawCircle(0, 0, 30);
        ball.x = 400;
        ball.y = 100;
        stage.addChild(ball);

        let speed = 5;
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        ball.y += speed;
        if(ball.y > 570 || ball.y < 30) speed *= -1;
        stage.update();
        });
        </script>
    </body>
</html>

A ball bouncing vertically on the canvas.

Let’s Try →

CreateJS Rotating Square

# createjs/demo/rotating_square.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const square = new createjs.Shape();
        square.graphics.beginFill('green').drawRect(-50, -50, 100, 100);
        square.x = 400;
        square.y = 300;
        stage.addChild(square);

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        square.rotation += 2;
        stage.update();
        });
        </script>
    </body>
</html>

A square that rotates continuously.

Let’s Try →

CreateJS Moving Rectangles

# createjs/demo/moving_rects.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const rects = [];
        for(let i=0; i<5; i++) {
        const r = new createjs.Shape();
        r.graphics.beginFill('orange').drawRect(0, 0, 60, 60);
        r.x = i*150;
        r.y = 300;
        stage.addChild(r);
        rects.push({shape: r, speed: i+1});
        }

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        rects.forEach(r => {
        r.shape.x += r.speed;
        if(r.shape.x > 800) r.shape.x = -60;
        });
        stage.update();
        });
        </script>
    </body>
</html>

Multiple rectangles moving horizontally at different speeds.

Let’s Try →

CreateJS Color Change

# createjs/demo/color_change.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('red').drawCircle(0, 0, 50);
        circle.x = 400;
        circle.y = 300;
        stage.addChild(circle);

        const colors = ['red','blue','green','orange','purple'];
        let index = 0;
        setInterval(() => {
        index = (index+1) % colors.length;
        circle.graphics.clear().beginFill(colors[index]).drawCircle(0,0,50);
        stage.update();
        }, 1000);
        </script>
    </body>
</html>

A circle that changes color every second.

Let’s Try →

CreateJS Draggable Circle

# createjs/demo/draggable_circle.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('cyan').drawCircle(0, 0, 50);
        circle.x = 400;
        circle.y = 300;
        circle.cursor = 'pointer';
        circle.on('pressmove', (evt) => { circle.x = evt.stageX; circle.y = evt.stageY; stage.update(); });
        stage.addChild(circle);
        stage.update();
        </script>
    </body>
</html>

A draggable circle using mouse events.

Let’s Try →

CreateJS Rotating Multiple Shapes

# createjs/demo/rotating_shapes.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const shapes = [];
        for(let i=0; i<3; i++) {
        const s = new createjs.Shape();
        s.graphics.beginFill(['red','green','blue'][i]).drawRect(-25,-25,50,50);
        s.x = 200 + i*200;
        s.y = 300;
        stage.addChild(s);
        shapes.push({shape: s, speed: i+1});
        }

        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        shapes.forEach(s => s.shape.rotation += s.speed);
        stage.update();
        });
        </script>
    </body>
</html>

Multiple shapes rotating at different speeds.

Let’s Try →

CreateJS Fading Circle

# createjs/demo/fading_circle.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('magenta').drawCircle(0,0,50);
        circle.x = 400;
        circle.y = 300;
        stage.addChild(circle);

        let alpha = 1, fadingOut = true;
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        if(fadingOut) alpha -= 0.01; else alpha += 0.01;
        if(alpha <= 0) fadingOut = false;
        if(alpha >= 1) fadingOut = true;
        circle.alpha = alpha;
        stage.update();
        });
        </script>
    </body>
</html>

A circle that fades in and out continuously.

Let’s Try →

CreateJS Scaling Circle

# createjs/demo/scaling_circle.html
<html>
    <head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>
    <body>
        <canvas id="demoCanvas" width="800" height="600"></canvas>
        <script>
        const stage = new createjs.Stage('demoCanvas');
        const circle = new createjs.Shape();
        circle.graphics.beginFill('yellow').drawCircle(0,0,50);
        circle.x = 400;
        circle.y = 300;
        stage.addChild(circle);

        let scaleUp = true;
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', () => {
        if(scaleUp) circle.scaleX += 0.01; else circle.scaleX -= 0.01;
        circle.scaleY = circle.scaleX;
        if(circle.scaleX >= 2) scaleUp = false;
        if(circle.scaleX <= 0.5) scaleUp = true;
        stage.update();
        });
        </script>
    </body>
</html>

A circle that continuously grows and shrinks.

Let’s Try →