Learn Createjs - 9 Code Examples & CST Typing Practice Test

CreateJS is a suite of modular JavaScript libraries and tools designed to facilitate rich interactive content via HTML5 Canvas, supporting animation, sound, and UI interaction.

View all 9 Createjs code examples →

Simple CreateJS Animation CreateJS Bouncing Ball CreateJS Rotating Square CreateJS Moving Rectangles CreateJS Color Change CreateJS Draggable Circle CreateJS Rotating Multiple Shapes CreateJS Fading Circle CreateJS Scaling Circle

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 →

Frequently Asked Questions about Createjs

What is Createjs?

CreateJS is a suite of modular JavaScript libraries and tools designed to facilitate rich interactive content via HTML5 Canvas, supporting animation, sound, and UI interaction.

What are the primary use cases for Createjs?

HTML5 Canvas-based games and animations. Interactive web ads and banners. Multimedia-rich educational apps. Vector graphics and sprite-based animations. Integration with Adobe Animate exported content

What are the strengths of Createjs?

Rich animation and multimedia capabilities. Cross-browser support for HTML5 Canvas. Timeline and tweening make animations simple. Modular libraries allow selective usage. Compatible with many design workflows and tools

What are the limitations of Createjs?

Canvas-based only (DOM elements not animated directly). Not designed for 3D rendering. Performance can degrade with very large scenes. Requires understanding of event-driven animation. Limited modern JS features compared to React-based libraries

How can I practice Createjs typing speed?

CodeSpeedTest offers 9+ real Createjs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

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 →

Frequently Asked Questions about Createjs

What is Createjs?

CreateJS is a suite of modular JavaScript libraries and tools designed to facilitate rich interactive content via HTML5 Canvas, supporting animation, sound, and UI interaction.

What are the primary use cases for Createjs?

What are the strengths of Createjs?

What are the limitations of Createjs?

How can I practice Createjs typing speed?

CodeSpeedTest offers 9+ real Createjs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.