#

API Documentation for: NEXT
Show: Inherited Protected Private Deprecated

# 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:

- Images using Bitmap
- Vector graphics using Shape and Graphics
- Animated bitmaps using SpriteSheet and Sprite
- Simple text instances using Text
- Containers that hold other DisplayObjects using Container
- Control HTML DOM elements using DOMElement

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

- Canvas features such as Shadow and CompositeOperation
- Ticker, a global heartbeat that objects can subscribe to
- Filters, including a provided ColorMatrixFilter, AlphaMaskFilter, AlphaMapFilter, and BlurFilter. See Filter for more information
- A ButtonHelper utility, to easily create interactive buttons
- SpriteSheetUtils and a SpriteSheetBuilder to help build and manage SpriteSheet functionality at run-time.

#### 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:

- AlphaMapFilter
- AlphaMaskFilter
- Bitmap
- BitmapCache
- BitmapText
- BlurFilter
- ButtonHelper
- ColorFilter
- ColorMatrix
- ColorMatrixFilter
- Container
- DisplayObject
- DisplayProps
- DOMElement
- EaselJS
- Filter
- Graphics
- Graphics.Arc
- Graphics.ArcTo
- Graphics.BeginPath
- Graphics.BezierCurveTo
- Graphics.Circle
- Graphics.ClosePath
- Graphics.Ellipse
- Graphics.Fill
- Graphics.LineTo
- Graphics.MoveTo
- Graphics.PolyStar
- Graphics.QuadraticCurveTo
- Graphics.Rect
- Graphics.RoundRect
- Graphics.Stroke
- Graphics.StrokeDash
- Graphics.StrokeStyle
- Matrix2D
- MouseEvent
- MovieClip
- MovieClipPlugin
- Point
- Rectangle
- Shadow
- Shape
- Sprite
- SpriteSheet
- SpriteSheetBuilder
- SpriteSheetUtils
- Stage
- StageGL
- Text
- Touch
- UID
- VideoBuffer
- WebGLInspector