Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Moving Rectangles - Createjs Typing CST Test
Moving Rectangles — Createjs Code
Multiple rectangles moving horizontally at different speeds.
# 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>Createjs Language Guide
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.
Primary Use Cases
- ▸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
Notable Features
- ▸Modular suite: EaselJS, TweenJS, SoundJS, PreloadJS
- ▸Supports timeline and tween animations
- ▸High-performance Canvas rendering
- ▸Event-driven interactivity for user input
- ▸Asset preloading and management
Origin & Creator
CreateJS was developed by gskinner.com (Grant Skinner) starting around 2010, evolving from earlier Flash-to-HTML5 tooling.
Industrial Note
CreateJS is widely used for browser-based games, HTML5 banner ads, interactive infographics, and multimedia-rich web applications.
Quick Explain
- ▸CreateJS provides a high-level API to work with HTML5 Canvas, abstracting low-level drawing and animation.
- ▸It includes libraries for animations (TweenJS), vector graphics (EaselJS), sound management (SoundJS), and asset preloading (PreloadJS).
- ▸Developers can create complex, timeline-based animations, interactive games, and multimedia apps.
- ▸It integrates with external tools like Adobe Animate for exporting animations directly to Canvas.
- ▸Supports cross-browser rendering and leverages GPU acceleration when possible for smooth performance.
Core Features
- ▸EaselJS: Canvas abstraction and display list
- ▸TweenJS: Animation tweening and timelines
- ▸SoundJS: Audio playback and control
- ▸PreloadJS: Preloading assets efficiently
- ▸Integration with Adobe Animate CC export
Learning Path
- ▸Understand Canvas basics
- ▸Learn EaselJS Stage and DisplayObjects
- ▸Animate with TweenJS
- ▸Manage assets with PreloadJS
- ▸Integrate audio with SoundJS
Practical Examples
- ▸Animated banner ads with Canvas
- ▸Interactive educational diagrams
- ▸Browser-based 2D games
- ▸Sprite-based animations for UI
- ▸Audio-synchronized animations with SoundJS
Comparisons
- ▸CreateJS vs GSAP: GSAP more powerful for DOM/JS animation; CreateJS focuses on Canvas
- ▸CreateJS vs Anime.js: Anime.js animates DOM/SVG; CreateJS targets Canvas
- ▸CreateJS vs PixiJS: PixiJS offers WebGL rendering; CreateJS is Canvas-first
- ▸CreateJS vs Phaser: Phaser is full game engine; CreateJS is lightweight animation suite
- ▸CreateJS vs Framer Motion: Framer Motion is React-focused, declarative; CreateJS is Canvas imperative
Strengths
- ▸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
Limitations
- ▸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
When NOT to Use
- ▸3D graphics or WebGL-heavy apps
- ▸React component animation (prefer Framer Motion)
- ▸DOM/SVG-based UI animation
- ▸High-performance game engines needing physics
- ▸Server-side rendering frameworks
Cheat Sheet
- ▸const stage = new createjs.Stage('canvasId');
- ▸const circle = new createjs.Shape(); circle.graphics.beginFill('red').drawCircle(0,0,50); stage.addChild(circle);
- ▸createjs.Tween.get(circle).to({x:300}, 1000);
- ▸createjs.Ticker.addEventListener('tick', stage);
- ▸createjs.Sound.play('soundId');
FAQ
- ▸Can CreateJS animate DOM elements? -> No, Canvas only
- ▸Does it support audio? -> Yes, via SoundJS
- ▸Is it production-ready? -> Yes, widely used in HTML5 ads/games
- ▸Can I use it with React? -> Yes, but direct Canvas manipulation, not declarative
- ▸Does it support timeline-based animation? -> Yes, via TweenJS and Adobe Animate export
30-Day Skill Plan
- ▸Week 1: Canvas and stage setup
- ▸Week 2: Shapes and bitmap drawing
- ▸Week 3: TweenJS animations
- ▸Week 4: Audio and preload management
- ▸Week 5: Complex timeline and interactivity
Final Summary
- ▸CreateJS is a modular suite for HTML5 Canvas-based interactive content.
- ▸Includes EaselJS, TweenJS, SoundJS, and PreloadJS for graphics, animation, audio, and asset loading.
- ▸Ideal for games, interactive ads, and multimedia apps.
- ▸Works with Adobe Animate for timeline export.
- ▸Cross-browser compatible and lightweight for Canvas-driven projects.
Project Structure
- ▸index.html - canvas and script inclusion
- ▸main.js - CreateJS initialization and animation code
- ▸assets/ - images, sounds, JSON files
- ▸sprites/ - sprite sheets for animation
- ▸libs/ - CreateJS library files or CDN references
Monetization
- ▸Interactive web ads and banners
- ▸Educational multimedia apps
- ▸Browser-based games
- ▸SaaS apps with interactive dashboards
- ▸Custom HTML5 Canvas animations for clients
Productivity Tips
- ▸Reuse DisplayObjects and sprites
- ▸Preload assets efficiently with PreloadJS
- ▸Use TweenJS timelines for batch animations
- ▸Optimize Canvas redraws per frame
- ▸Modularize code for maintainability
Basic Concepts
- ▸Stage - main container for display objects
- ▸DisplayObject - base class for visual elements
- ▸Shape/Bitmap/Sprite - drawable objects
- ▸Tween - time-based animation for properties
- ▸Ticker - main loop for updating animations