The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

Overview

EaselJS

EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.

It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.

It has no external dependencies, and should be compatible with virtually any framework you enjoy using.

Simple Example

//Draw a square on screen.
var stage = new createjs.Stage('myCanvas');
var shape = new createjs.Shape();
shape.graphics.beginFill('red').drawRect(0, 0, 120, 120);
stage.addChild(shape);
stage.update();

Sprite Animation Example

var ss = new createjs.SpriteSheet({
	frames: {
		width: 32,
		height: 64,
		numFrames: 19
	},
	animations: {run: [0, 25], jump: [26, 63, "run"]},
	images: ["./assets/runningGrant.png"]
});
	
var sprite = new createjs.Sprite(ss, "run");
sprite.scaleY = sprite.scaleX = 0.4;
stage.addChild(sprite);
	
sprite.on("click", function() { sprite.gotoAndPlay("jump"); });
	
createjs.Ticker.on("tick", stage);

Support and Resources

It was built by gskinner.com, and is released for free under the MIT license, which means you can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.

Classes

The API is inspired in part by Flash's display list, and should be easy to pick up for both JS and AS3 developers. Check out the docs for more information.

DisplayObject Abstract base class for all display elements in EaselJS. 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 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.

Sprite Displays single frames or animations from sprite sheets, and provides APIs for managing playback and sequencing.

Shape Renders a Graphics object within the context of the display list.

Graphics Provides an easy to use API for drawing vector data. Can be used with Shape, or completely stand alone.

Text Renders a single line of text to the stage.

BitmapText Renders text using a SpriteSheet of letter.

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. BlurFilter, ColorMatrixFilter, etc) extend.

There are also a few helper classes included:

Shadow Defines all of the properties needed to display a shadow on a display object.

Ticker Provides a pausable centralized tick manager for ticking Stage instances or other time based code.

UID Very simple class that provides global, incremental unique numeric IDs.

SpriteSheet Encapsulates all the data associated with a sprite sheet to be used with Sprite.

SpriteSheetUtils Contains utility methods for extending existing sprite sheets with flipped frames and extracting individual frames.

SpriteSheetBuilder Build a bitmap SpriteSheet from vector graphics at run time. Get the filesize savings of vector, with the performance of a SpriteSheet.

Matrix2D Represents a 3x3 affine transformation matrix. Used internally for calculating concatenated transformations.

Rectangle Represents a rectangle as defined by the points (x, y) and (x+width, y+height).

Point Represents a point on a 2 dimensional x / y coordinate system.

A WebGL implementation currently exists, but is limited.

StageGL A drop-in replacement for the EaselJS Stage class that fully supports a WebGL pipeline. StageGL will draw most Bitmap- based content, including any cached DisplayObjects.

WebGLInspector A utility and helper class designed to work with StageGL to help investigate and test performance or display problems.

Comments
  • Question : prototypal definition of class attributes

    Question : prototypal definition of class attributes

    I think you choose to use this technique to gain memory space for all default attribute values. But in certain cases it can degrade performance : cf. http://codereview.stackexchange.com/a/28360

    Do you think we can fall in this case ?

    For instance, the Matrix2D class has these four properties : alpha, shadow, compositeOperation, visible which are only defined initially on the prototype scope. It is possible to have several definition of Matrix2D classes.

    What do you think ?

    performance 
    opened by webskin 29
  • pressup not firing after pressmove on stock android

    pressup not firing after pressmove on stock android

    Hey guys,

    I'm having trouble with my touch events and a Samsung s3 phone.

    When I have a "pressmove" event, the "pressup" does not fire and the mousedown does not fire. It is stuck in the pressmove event:

    this.on( 'mousedown', this._onPressDown, this );
    this.on( 'pressup', this._onPressUp, this );
    this.on( 'pressmove', this._onPressMove, this );
    
    p._onPressDown = function () {
        console.log( "PRESS DOWN" );
    };
    
    p._onPressUp = function () {
        console.log( "PRESS UP"  );
    };
    
    p._onPressMove = function () {
        console.log( "PRESS MOVE" );
    };
    

    It works the first time, but not after that. I have also tried disabling children and that did nothing. You have to do a mosedown and up without a move the break out of the pressmove event.

    opened by aholla 29
  • Sound not triggered on iOS 9 when Touch is enabled

    Sound not triggered on iOS 9 when Touch is enabled

    The same content that triggered audio on iOS 8 stopped as soon as we upgraded to iOS 9. We could not trigger audio on touch when using createjs.Touch.

    This is related to #586.

    To get around it, it turns out you have to

    (1) set allowDefault to true when calling Touch like this createjs.Touch.enable(stage,false,true) and (2) stage.preventSelection = false

    for the event to be bubbled properly for Safari on iOS to acknowledge a user event to trigger audio.

    Maybe this is merely a doc issue? Not sure yet.

    opened by ramezrafla 27
  • Video bitmaps randomly flash white frames on loop

    Video bitmaps randomly flash white frames on loop

    JS fiddle: http://jsfiddle.net/zhp7pdzq/ The top video is canvas. The bottom video is the actual

    bug NextVersion 
    opened by JasXSL 24
  • IE Browser Support via ExplorerCanvas integration

    IE Browser Support via ExplorerCanvas integration

    I know there is already an issue #55 (about trying to load the easel.js via IE and throwing errors). As daniellmb notes in that issue post: "Internet Explorer 6, 7 and 8 still make up about 57% of the browser market." You really HAVE TO DO SOMETHING about IE support if you expect Easel.js to move out of the "experimental" code and into the browser mainstream. (sorry to have to shout but no way to bold)

    Of course IE6-8 doesn't have canvas support, but here is my proposal - there is a project that uses javascript and Microsoft's IE proprietary vml scripting to simulate canvas events. It's called explorercanvas: http://excanvas.sourceforge.net/ Yes you take a performance hit but sometimes you can get canvas stuff to run using this library. At least its something.. Is there any chance that the easel.js code could be annotated to show where explorercanvas code could be substituted for easel.js code if the browser detected is IE?

    opened by jmwhite999 24
  • Add new events to DisplayObject for when it is added or removed from a Container or Stage

    Add new events to DisplayObject for when it is added or removed from a Container or Stage

    I suggest adding some new events to the DisplayObject class for when it is added or removed from a Container or Stage. These events would be convenient when a DisplayObject needs to execute logic depending on the Stage or Container.

    The events are present in Flash, so my suggestion would be to mimic these events exactly: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#event:added http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#event:removed http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#event:addedToStage http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#event:removedFromStage

    performance enhancement 
    opened by jonkoops 21
  • 0.8 cache no longer displays

    0.8 cache no longer displays

    When caching a container or sprite, the display object does not show up when adding to stage. Consequently, SpriteSheetBuilder is not working either.

    UTR 
    opened by bmanderscheid 20
  • Options hash for DisplayObject constructors

    Options hash for DisplayObject constructors

    There's a feature I'd like, and am willing to implement. I'm wondering whether you would accept it.

    Easel's API has you create a scene graph object, then set its properties:

    var house = new createjs.Bitmap();
    house.image = houseImage;
    house.x = 800;
    house.y = 768 - groundHeight - houseImage.height;
    background.addChild(house);
    

    Easel doesn't use the common Javascript idiom of accepting a params hash in the constructor. As scenes get complicated, that idiom would be really nice to have. More declarative & nestable code like this ends up being much more readable as scene size grows:

    background.addChild(
        new createjs.Bitmap({
            image: houseImage,
            x: 800,
            y: 768 - groundHeight - houseImage.height
        })
    );
    

    No smattering of little vars, everything concise and nested readably.

    Shape poses a special problem:

    var circle = new createjs.Shape();
    circle.x = 50;
    circle.y = 100;
    circle.graphics
        .setStrokeStyle(5, 'round')
        .beginStroke('black')
        .beginFill('red')
        .drawCircle(0, 0, r);
    background.addChild(circle);
    

    Properties like stroke width and color are mixed into the graphics object, which leads to little codeballs that can be nasty to decipher (and what •was• the order of those setStroke params again?!?). I propose a few special options for common stroke & fill options, plus a callback for the graphics:

    background.addChild(
      new createjs.Shape({
          x: 50,
          y: 100,
          strokeWidth: 5,
          strokeCap: 'round',
          strokeColor: 'black',
          fillColor: 'red',
          graphics: function(g) { g.drawCircle(0, 0, r); }
      })
    );
    

    I've prototyped all of this in my project, and it cleans things up a lot!

    Thoughts? If I can get together a tidy implementation that doesn't create a mess in all the Easel constructors, would you accept the pull request?

    opened by pcantrell 18
  • New event system that has more of an AS3 look-and-feel

    New event system that has more of an AS3 look-and-feel

    Some quick information about this :

    • A basic Observer Pattern implementation;
    • Support for context-passing and event priority;
    • All the same events that were there before are available through the new event system;
    • Features new events such as : keyboard events, a mousewheel event, added/removed from stage events, enter/exit frame events and a catch-all event;
    • There is no true capture nor bubbling phase (it works the same way it did with the previous event system);
    • Users can make their own custom events, just like in flash.
    opened by joelrobichaud 17
  • IE 10 Click event Doesn't work correctly

    IE 10 Click event Doesn't work correctly

    Am building a Card game all work perfect on other browsers even IE9 but on IE10 i have a problem with those events

    Card.onDoubleClick = function(ev){ // do something }

    Card.onPress = function(e){ // do somthing }

    when i double click on card for the first time it work but when i click on other cards it doesn't work and log show me that i clicked on the first card

    when i move away the cursor from the canvas and i come back it work again but for one time

    opened by omezzine 16
  • Matrix2D formulas

    Matrix2D formulas

    I've had to replicate most of the Matrix2D functionality to work with my polygon-based library for spatial management of objects (for improved physics and dynamic relative positioning). I began with the existing Matrix2D class and applied it to the rendering of polygons. The intent is to make it so I can write code for interacting with polygons, but ensure that all modifications to the polygons directly map to EaselJS display objects. The way I do this is to keep track of an independent matrix related to the polygon object, then pass the matrix to the display object via my own copy of the decompose() function.

    Applying the Matrix2D functions to polygon rendering also acted as a 'check' for the matrix math. I found that the EaselJS matrix functions did not do what I expected when applied to polygon rendering. I worked out a lot of the math independently (hadn't done any linear algebra in years... phew!) and what I came up with also didn't check out with the EaselJS matrix functions. Here are my append and prepend functions which differ very slightly from the EaselJS functions (compare the tx and ty formulas):

    p.append = function(a, b, c, d, tx, ty) {
    
        var a1  = this.a;
        var b1  = this.b;
        var c1  = this.c;
        var d1  = this.d;
        var tx1 = this.tx;
    
        this.a  = a*a1+b*c1;
        this.b  = a*b1+b*d1;
        this.c  = c*a1+d*c1;
        this.d  = c*b1+d*d1;
        this.tx = a*this.tx+b*this.ty+tx;
        this.ty = c*tx1+d*this.ty+ty;
    
        return this;
    };
    
    p.prepend = function(a, b, c, d, tx, ty) {
        var a1  = this.a;
        var b1  = this.b;
        var c1  = this.c;
        var d1  = this.d;
        this.a  = a1*a+this.b*c;
        this.b  = a1*b+this.b*d;
        this.c  = c1*a+this.d*c;
        this.d  = c1*b+this.d*d;
        this.tx = a1*tx+b1*ty+this.tx;
        this.ty = c1*tx+d1*ty+this.ty;
    
        return this;
    };
    

    Also, in order to make my polygon correspond to the display object I had to change a sign in the decompose function (see target.rotation = -skewY/Matrix2D.DEG_TO_RAD):

    p.decompose = function(target) {
        if (target == null) { target = {}; }
        target.x = this.tx;
        target.y = this.ty;
        target.scaleX = Math.sqrt(this.a * this.a + this.b * this.b);
        target.scaleY = Math.sqrt(this.c * this.c + this.d * this.d);
    
        var skewX = Math.atan2(-this.c, this.d);
        var skewY = Math.atan2(this.b, this.a);
    
        if (skewX == skewY) {
            target.rotation = -skewY/Matrix2D.DEG_TO_RAD;
            if (this.a < 0 && this.d >= 0) {
                target.rotation += (target.rotation <= 0) ? 180 : -180;
            }
            target.skewX = target.skewY = 0;
        } else {
            target.skewX = skewX/Matrix2D.DEG_TO_RAD;
            target.skewY = skewY/Matrix2D.DEG_TO_RAD;
        }
        return target;
    };
    

    My guess is that the discrepancies in the EaselJS code cancel out so you might not see any issues in most applications. I checked my formulas against a matrix calculator and I'm pretty sure the formulas I use above are correct. Maybe this is only an issue of systematic discrepancy between our two systems and independently they are self-consistent?

    bug verified 
    opened by rvangundy 16
  • Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true

    Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true

    Some people are getting this warning in Chrome:

    Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true

    We have looked briefly into it. Does anyone see a problem setting this to true as default for non-stageGL contexts?

    We are probably going to try it for our ZIM CreateJS unless someone suggests otherwise. Will have to re-read the specs on it...

    Cheers.

    opened by danzen 5
  • Hit area detection on Samsung Internet Browser

    Hit area detection on Samsung Internet Browser

    Hello guys! I've found there's some problem with hitArea detection on movieclips, with shape rectangle hitArea on Samsung Internet Browser on touch devices. At all other tested browsers the functionality of my application and it's buttons works everywhere ok, but not on Samsung Internet Browser. I've found this topic - https://stackoverflow.com/questions/72203563/createjs-click-target-is-wrong-on-samsung-internet-browser - I was wondering it helps, and yes, it solves issue for some cases of the application, but for others don't - when patch is applied, some buttons work of after it wasn't before, but some others stops to work.. I've checked whats going on in _getObjectsUnderPoint method, and in default createjs code on samsung browser it really detects click anywhere to any button randomly.. I'm running 0.8.4, I've tested 1.0.0, tried to cache the shape hitarea, click or mousedown event.. When I logged, it seems the method is returning as hit on other buttons, that has mouseover/mouseout events only.. And when the patch from link was applied, there was problem with bounds, because not all assets have it defined... I tried to make condition to the touch devides with the patch from link, which has solve the isse for some of the application instances, but for some it made unable to touch on any touch device, failing at missing bounds.. So my question is, what's wrong on samsung browser, how should I define hitArea for the MovieClip and get right hitArea test, is there anyone other having same issue, or is it known issue of samsung browser, OR what I think - what can be wrong in my application regarding to movieclip's hitArea shape (or shape in container), caching it, setBounds, or maybe container.on vs. container addEventListener... I realy appreciate any help from you, best regards! :)

    opened by kulabros 1
  • Mousemovement Performance improvement

    Mousemovement Performance improvement

    Hello everyone, I am looking for an alternative/better performing MouseMovement method. I read the following in another entry:

    https://github.com/CreateJS/EaselJS/issues/977 I do recommend writing your own hit testing if you don't need pixel perfect hit interactions though!

    So I assume the problem is in the hitTest method, which analyzes pixel perfect everything. I still dared to modify the CreateJS lib. Does anyone here have experience and can help me how to adjust which method? Thank you!

    opened by Matt-Maerz 2
  • Text is still compressed when maxWidth is null

    Text is still compressed when maxWidth is null

    Issue Details

    • Version used (Ex; 1.0):

    1.0.0

    • Describe whats happening (Include any relevant console errors, a Gist is preferred for longer errors):

    According to the documentation:

    "The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or shrunk to make it fit in this width." However, the text still gets condensed after large amounts of text. It appears to get capped when drawing the text by setting 0xFFFF: https://createjs.com/docs/easeljs/files/easeljs_display_Text.js.html#l401.

    • OS & Browser version (Please be specific) (Ex; Windows 10 Home, Chrome 62.0.3202.94):

    Android 8/9/10 Chrome 85.0.4183.81 Windows 10/11 Chrome 100.0.4896.127 (latest)

    • Do you know of any workarounds?

    Set maxWidth = Number.MAX_VALUE

    • Provide any extra details that will help us fix your issue. Including a link to a CodePen.io or JSFiddle.net example that shows the issue in isolation will greatly increase the chance of getting a quick response.

    http://jsfiddle.net/ft2v1Lem/

    opened by vwmberry95 1
Releases(1.0.0)
Owner
CreateJS
A suite of open source libraries and tools for building rich interactive content on open web technologies.
CreateJS
📡Usagi-http-interaction: A library for interacting with Http Interaction API

?? - A library for interacting with Http Interaction API (API for receiving interactions.)

Rabbit House Corp 3 Oct 24, 2022
An easy-to-use library to make your life easier when working with random numbers or random choices in javascript.

vrandom An easy-to-use library to make your life easier when working with random numbers or random choices in javascript. Table of contents Installati

Valerio Cipolla 1 Aug 16, 2022
Solid Forms provides several form control objects useful for making working with forms easier.

Solid Forms Solid Forms provides several form control objects useful for making working with forms easier. Demos and examples below. # solidjs yarn ad

John 28 Jan 2, 2023
Elrond blockchain CLI helper tools - interaction with APIs, smart contracts and protocol

Buildo Begins ?? Meet Buildo. He is here to help you start creating in the Elrond blockchain ecosystem. Here is where everything begins. I'm going on

Elrond's Dev Guild 22 Dec 30, 2022
Um bot de suporte feito usando threads para o Discord, 100% customizável, feito em JavaScript e inspirado no Rio Helper do servidor Elixir Lab e na Loritta Helper do serivdor de suporte da Loritta.

Ticket Bot Um bot de suporte feito usando threads para o Discord, 100% customizável, feito em JavaScript e inspirado no Rio Helper do servidor Elixir

ADG 6 Dec 21, 2022
SUID is all a set of utils and components ported from MUI Core and much more.

Solid.js User Interface Design (SUID) A port of Material-UI (MUI) built with Solid.js SUID is all a set of utils and components ported from MUI Core a

null 311 Jan 1, 2023
a JavaScript library that allows you to make a mouse interaction animation easily.

Cotton.JS is a JavaScript library that allows you to make a mouse interaction animation easily. Getting Started Download npm install cottonjs Manual

Wilson Wu 20 Dec 27, 2022
A simple library to view large images up close using simple mouse interaction, and the full screen.

Intense Images A stand alone javascript library for viewing images on the full, full screen. Using the touch/mouse position for panning. Here's a demo

Tim Holman 2.6k Dec 31, 2022
A custom element that aims to make it easier to embed Spring '83 boards

<spring-board> element A custom element that makes it simple to embed Spring '83 boards! Usage If you are using <spring-board> in a client-side framew

Ryan Murphy 11 Jan 1, 2023
An extension that makes Scratching much easier!

ScratchTools An extension that makes Scratching much easier! Official Discord. v1.0 ScratchTools Version 1.0 had multiple bugs, making it impossible t

rgantzos 0 May 23, 2022
A utility package for making discord-bot commands much easier to write with discord.js.

Cordcommand About A utility package for making discord-bot commands much easier to write with discord.js. Usage Example // initiate discord.js client

NLP practitioners 17 Dec 13, 2022
🖼️ Tiny JSX helper function for high-DPI (Retina Display) images.

img-srcx Tiny JSX helper function for high-DPI (Retina Display) images. 394 bytes minified and gzipped for ESM (830 bytes for ES5). Installation npm i

Chariz 4 Oct 6, 2022
The invoker based on event model provides an elegant way to call your methods in another container via promisify functions

The invoker based on event model provides an elegant way to call your methods in another container via promisify functions. (like child-processes, iframe, web worker etc).

尹挚 7 Dec 29, 2022
JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

Boyleing Point 5 May 13, 2021
Hierarchical Converter for Array of Objects

Conversor Hierárquico para Array de Objetos - Hierarchical Converter to Array of Objects Docker-compose Cria a interface network e containers indicado

Victor Vinícius Eustáquio de Almeida 2 Jan 27, 2022
Neo: Hierarchical Confusion Matrix Visualization

Neo: Hierarchical Confusion Matrix The confusion matrix, a ubiquitous visualization for helping people evaluate machine learning models, is a tabular

Apple 252 Dec 15, 2022
A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too!

astro-navigation A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too! Full docs coming soon! Basic usage This pa

Tony Sullivan 7 Dec 19, 2022
Minimal implementation of SLIP-0010 hierarchical deterministic (HD) wallets

micro-ed25519-hdkey Secure, minimal implementation of SLIP-0010 hierarchical deterministic (HD) wallets. Uses audited @noble/ed25519 under the hood. B

Paul Miller 11 Dec 25, 2022