EaselJS
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
Top Related Projects
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
a fresh, modern & lightweight HTML5 game engine
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
Quick Overview
EaselJS is a powerful JavaScript library that simplifies working with the HTML5 Canvas element. It provides a comprehensive set of tools for creating rich graphics, animations, and interactive content, making it easier for developers to build engaging visual experiences for the web.
Pros
- Easy to use API with a familiar display list hierarchy
- Robust support for sprite sheets and animations
- Excellent performance optimization for canvas rendering
- Seamless integration with other CreateJS libraries
Cons
- Learning curve for developers new to canvas-based graphics
- Limited built-in support for responsive design
- Dependency on CreateJS suite for some advanced features
- Less active development compared to some newer alternatives
Code Examples
Creating a simple shape:
var stage = new createjs.Stage("canvasElement");
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
Animating an object:
createjs.Tween.get(circle)
.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
.to({alpha: 0, y: 175}, 500, createjs.Ease.getPowInOut(2));
Handling user interaction:
circle.addEventListener("click", function(event) {
alert("You clicked the circle!");
});
Getting Started
- Include the EaselJS library in your HTML file:
<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
- Create a canvas element in your HTML:
<canvas id="myCanvas" width="500" height="300"></canvas>
- Initialize the stage and start creating:
var stage = new createjs.Stage("myCanvas");
var shape = new createjs.Shape();
shape.graphics.beginFill("red").drawRect(0, 0, 100, 100);
stage.addChild(shape);
stage.update();
This basic setup creates a red square on the canvas. From here, you can explore more advanced features like animations, interactivity, and complex graphics using the EaselJS API.
Competitor Comparisons
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Pros of PixiJS
- Better performance, especially for complex graphics and animations
- More comprehensive WebGL support, allowing for advanced visual effects
- Larger and more active community, resulting in frequent updates and extensive resources
Cons of PixiJS
- Steeper learning curve, particularly for developers new to WebGL
- Larger file size, which may impact initial load times for web applications
- Less integrated with other libraries compared to EaselJS in the CreateJS suite
Code Comparison
EaselJS:
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
stage.addChild(circle);
createjs.Ticker.addEventListener("tick", stage);
PixiJS:
const app = new PIXI.Application({ view: document.getElementById("canvas") });
const circle = new PIXI.Graphics();
circle.beginFill(0xFF0000).drawCircle(0, 0, 50);
app.stage.addChild(circle);
app.ticker.add(() => app.renderer.render(app.stage));
Both libraries offer similar functionality for basic 2D graphics, but PixiJS provides more advanced features and better performance for complex applications. EaselJS, being part of the CreateJS suite, offers better integration with other CreateJS libraries for a more comprehensive toolkit.
a fresh, modern & lightweight HTML5 game engine
Pros of melonJS
- More focused on game development with built-in physics engine and collision detection
- Better suited for complex game projects with scene management and state handling
- Active development and regular updates
Cons of melonJS
- Steeper learning curve for beginners compared to EaselJS
- Less flexibility for general-purpose canvas manipulation
- Smaller community and fewer learning resources available
Code Comparison
EaselJS:
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
melonJS:
me.game.world.addChild(new me.Sprite(100, 100, {
image: "circle",
width: 100,
height: 100
}));
me.game.repaint();
Both libraries provide ways to create and manipulate canvas elements, but melonJS is more oriented towards game-specific functionality, while EaselJS offers a more general-purpose approach to canvas manipulation. EaselJS may be easier for beginners to grasp, while melonJS provides more built-in features for game development out of the box.
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Pros of Konva
- Better performance for complex scenes and animations
- More active development and frequent updates
- Supports both desktop and mobile touch events out of the box
Cons of Konva
- Steeper learning curve for beginners
- Smaller community and fewer learning resources compared to EaselJS
- Less integration with other CreateJS libraries
Code Comparison
EaselJS:
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
Konva:
var stage = new Konva.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 100,
y: 100,
radius: 50,
fill: 'red'
});
layer.add(circle);
stage.add(layer);
Both libraries offer similar functionality for creating and manipulating shapes on a canvas, but Konva's syntax is more object-oriented and requires explicit layer management. EaselJS has a simpler API for basic tasks, while Konva provides more flexibility and control over complex scenes.
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
Pros of Fabric.js
- More comprehensive object model with built-in support for complex shapes and paths
- Better touch device support and mobile-friendly features
- Extensive SVG import/export capabilities
Cons of Fabric.js
- Steeper learning curve due to more complex API
- Larger file size, which may impact load times for simpler projects
- Less integration with other libraries compared to EaselJS in the CreateJS suite
Code Comparison
EaselJS:
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
Fabric.js:
var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({
radius: 50,
fill: 'red',
left: 100,
top: 100
});
canvas.add(circle);
canvas.renderAll();
Both libraries provide ways to create and manipulate canvas elements, but Fabric.js offers a more object-oriented approach with additional built-in features for complex shapes and interactivity.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
EaselJS
EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.
It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.
It has no external dependencies, and should be compatible with virtually any framework you enjoy using.
Simple Example
//Draw a square on screen.
var stage = new createjs.Stage('myCanvas');
var shape = new createjs.Shape();
shape.graphics.beginFill('red').drawRect(0, 0, 120, 120);
stage.addChild(shape);
stage.update();
Sprite Animation Example
var ss = new createjs.SpriteSheet({
frames: {
width: 32,
height: 64,
numFrames: 19
},
animations: {run: [0, 25], jump: [26, 63, "run"]},
images: ["./assets/runningGrant.png"]
});
var sprite = new createjs.Sprite(ss, "run");
sprite.scaleY = sprite.scaleX = 0.4;
stage.addChild(sprite);
sprite.on("click", function() { sprite.gotoAndPlay("jump"); });
createjs.Ticker.on("tick", stage);
Support and Resources
- Find examples and more information at the EaselJS web site.
- Read the documentation.
- Discuss, share projects, and interact with other users on reddit.
- Ask technical questions on Stack Overflow.
- File verified bugs or formal feature requests using Issues on GitHub.
- There is a Google Group for discussions and support.
- Have a look at the included examples and API documentation for more in-depth information.
It was built by gskinner.com, and is released for free under the MIT license, which means you can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.
Classes
The API is inspired in part by Flash's display list, and should be easy to pick up for both JS and AS3 developers. Check out the docs for more information.
DisplayObject Abstract base class for all display elements in EaselJS. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, skewX, skewY, alpha, shadow, etc) that are common to all display objects.
Stage The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.
Container A nestable display container, which lets you aggregate display objects and manipulate them as a group.
Bitmap Draws an image, video or canvas to the canvas according to its display properties.
Sprite Displays single frames or animations from sprite sheets, and provides APIs for managing playback and sequencing.
Shape Renders a Graphics object within the context of the display list.
Graphics Provides an easy to use API for drawing vector data. Can be used with Shape, or completely stand alone.
Text Renders a single line of text to the stage.
BitmapText Renders text using a SpriteSheet of letter.
DOMElement An experimental display object that allows you to manage an HTML element as a part of the display list.
Filter The base filter class that other filters (ex. BlurFilter, ColorMatrixFilter, etc) extend.
There are also a few helper classes included:
Shadow Defines all of the properties needed to display a shadow on a display object.
Ticker Provides a pausable centralized tick manager for ticking Stage instances or other time based code.
UID Very simple class that provides global, incremental unique numeric IDs.
SpriteSheet Encapsulates all the data associated with a sprite sheet to be used with Sprite.
SpriteSheetUtils Contains utility methods for extending existing sprite sheets with flipped frames and extracting individual frames.
SpriteSheetBuilder Build a bitmap SpriteSheet from vector graphics at run time. Get the filesize savings of vector, with the performance of a SpriteSheet.
Matrix2D Represents a 3x3 affine transformation matrix. Used internally for calculating concatenated transformations.
Rectangle Represents a rectangle as defined by the points (x, y) and (x+width, y+height).
Point Represents a point on a 2 dimensional x / y coordinate system.
A WebGL implementation currently exists, but is limited.
StageGL A drop-in replacement for the EaselJS Stage class that fully supports a WebGL pipeline. StageGL will draw most Bitmap- based content, including any cached DisplayObjects.
WebGLInspector A utility and helper class designed to work with StageGL to help investigate and test performance or display problems.
Top Related Projects
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
a fresh, modern & lightweight HTML5 game engine
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot