API Documentation for: 1.0.0
Show:

EaselJS Module

Defined in: EaselJS:9

The EaselJS 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 2D graphics in Canvas much easier. EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas...

Getting Started

To get started with Easel, create a Stage that wraps a CANVAS element, and add DisplayObject instances as children. EaselJS supports:

All display objects can be added to the stage as children, or drawn to a canvas directly.

User Interactions

All display objects on stage (except DOMElement) will dispatch events when interacted with using a mouse or touch. EaselJS supports hover, press, and release events, as well as an easy-to-use drag-and-drop model. Check out MouseEvent for more information.

Simple Example

This example illustrates how to create and position a Shape on the Stage using EaselJS' drawing API.

    //Create a stage by getting a reference to the canvas
    stage = new createjs.Stage("demoCanvas");
    //Create a Shape DisplayObject.
    circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 40);
    //Set position of Shape instance.
    circle.x = circle.y = 50;
    //Add Shape instance to stage display list.
    stage.addChild(circle);
    //Update stage will render next frame
    stage.update();

Simple Interaction Example

 displayObject.addEventListener("click", handleClick);
 function handleClick(event){
     // Click happenened
 }

 displayObject.addEventListener("mousedown", handlePress);
 function handlePress(event) {
     // A mouse press happened.
     // Listen for mouse move while the mouse is down:
     event.addEventListener("mousemove", handleMove);
 }
 function handleMove(event) {
     // Check out the DragAndDrop example in GitHub for more
 }

Simple Animation Example

This example moves the shape created in the previous demo across the screen.

    //Update stage will render next frame
    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick() {
     //Circle will move 10 units to the right.
        circle.x += 10;
        //Will cause the circle to wrap back
        if (circle.x > stage.canvas.width) { circle.x = 0; }
        stage.update();
    }

Other Features

EaselJS also has built in support for

Browser Support

All modern browsers that support Canvas will support EaselJS (http://caniuse.com/canvas). Browser performance may vary between platforms, for example, Android Canvas has poor hardware support, and is much slower on average than most other browsers.

This module provides the following classes: