a javascript library for working with
the html5 canvas element
CreateJS Announced
CreateJS will be a suite of modular libraries and tools that enable you to build rich interactive experiences on the open web. Visit CreateJS.com for a preview of what’s coming.
EaselJS v0.4
More robust sprite sheet support, filter effects, Touch support for iOS, double-click, bug fixes, and a lot more. Download now.
Zoë v1.6
With support for EaselJS v0.4, intelligent frame reuse, and multi-image sprite sheets. More info here.
links: download, API documentation, GitHub repo, bugbase, wiki, google group
The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
examples: game, sparkles, drag & drop, localToGlobal, sprites, graphics, bar graph, filter effects
For an example of EaselJS being used in a large-scale project, see Pirates Love Daisies, which uses EaselJS v0.1 to manage and render the game board.
EaselJS was built by gskinner.com, and is released under the MIT license, which means you can use it freely for almost any purpose (including commercial projects). Credit is appreciated where appropriate, but it is not a requirement.
companions: EaselJS works well with TweenJS (animation), SoundJS (audio), & Zoë (spritesheets)
EaselJS is currently in beta. We will be making significant improvements to the library, samples, and documentation over the coming weeks. Please be aware that this may necessitate changes to the existing API. If you’d like to contribute, please visit the GitHub repository for the project.
Easel is compatible with iOS, Android, and all major desktop browsers that support the canvas element.
The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. The key classes are:
DisplayObject
Abstract base class for all display elements in Easel. 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 update() 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.
Text
Renders text in the context of the display list.
Bitmap
Draws an image, video or canvas to the canvas according to its display properties.
BitmapAnimation
Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.
Graphics
Provides a simple but powerful API for rendering retained vector graphics to a canvas.
Shape
Renders vector art via the Graphics object within the context of the display list.
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. BoxBlurFilter, ColorMatrixFilter, etc) extend.
There are also helper classes for working with sprite sheets, managing interactions, and dealing with geometry. Have a look at the full API documentation for more info.
Source