a javascript library for working with
the html5 canvas element

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 full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

examples: sparkles, sprites, rollover, drag & drop

For an example of Easel being used in a large-scale project, see Pirates Love Daisies, which uses it to manage and render the game board.

version 0.1: download source, view API documentation, give feedback

Easel 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). We appreciate credit where appropriate, but it is not a requirement.

Easel is currently in early alpha. 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. We will also be moving it to google code or GitHub and opening it to contributors once we feel like it's in a decent beta state.

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, alpha, shadow, etc) that are shared between 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 other display elements and manipulate them as a group.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapSequence

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Shape

Renders vector drawing instructions within the context of the display list.

There are also helper classes for working with sprite sheets, managing interactions, and converting points between local and global coordinate spaces. Have a look at the full API documentation for more info.