Draggable Circle - Createjs Typing CST Test

Mode:

Duration:

Coding works best on desktop or with an external keyboard.

Draggable Circle — Createjs Code

A draggable circle using mouse events.

# 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>

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

Official Docs

More Createjs Typing Exercises

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

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Draggable Circle — Createjs Code

A draggable circle using mouse events.

# 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>

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.