EaselJS: custom Display Objects in ES2015

I love HTML5 Canvas, because I’m free to draw anything I have in my mind without the limit of the DOM, and EaselJS is a great library that simplify the traditional Javascript canvas syntax.
EaselJS is based on the concept of the display list ( very similar to ActionScript ) and if you have used it for a while you probably created a custom Display Object by using the official inheritance technique.

Since ES2015 (aka ES6) is still not officially supported by the library (currently 8.x), in this post I’m basically sharing my way to create custom display objects in ES6.

Suggestions are welcome.

SOURCE CODE

index.html

The main HTML file includes the CreateJS library and a < canvas > element.

App.js

This simple ES6 module creates two instances of our custom component.
The second instance also listens for the custom event animationEnd, dispatched when the fadeIn animations has been completed.

CircleButton.js

CircleButton extends createjs.Container in order to be used as display object:

Key Points

  • The custom display object is an ES6 class
  • This class extends the EaselJS Container class and inherits all its behaviors
  • The constructors accepts parameters, sets defaults and calls the super class constructor
  • The component is initialized and contains other display objects
  • The component can dispatch custom events (by using the dispatchEvent method)
  • As the official documentation says the component is promoted to "Container"
  • You can now create instances of the component: const btn = new CircleButton(...)

Also available as a Gist

RESULT

EASELJS DEMO

EaselJS is mainly used to create 2D games and advertising stuff but it represents an amazing tool to create infographics, awesome effects and any interactive user experience. The following video is a short showreel (2 mins) of our first EaselJS components and you can get more links from CreateJS website.

Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.