Easel JS: A Javascript lib for Working with the HTML5 Canvas Element

A great js api for flash developers that want a more familiar way of working with the HTML5 canvas

Thanks to Grant Skinner for developing this great api.

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

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.

Planned updates

Easel will be updated as time permits. We’re not making any promises, but here are some of the things we’re thinking of doing:

  • Optimization
  • Improved documentation
  • Improve Shape API to make it easier to work with vectors
  • Text support
  • Faster hit detection modes (ex. bounding box, circular)
  • Sprite sheet creation tool
  • More integrated interaction features (ex. roll over, drag and drop, mouseX/Y, etc)
  • Better inheritance implementation
  • Helper methods for browser compatibility
  • SVG support