Grant Skinner

The "g" in gskinner. Also the "skinner".


EaselJS v0.3 Released!

I’m very happy to announce that version 0.3 of EaselJS has been released. Even better, it’s now on GitHub, so you can fork it to your hearts content.

This version makes it even easier to build compelling content using the HTML5 canvas element and javascript. It has a rewritten rendering engine with support for skewing, an improved and optimized interaction model (5-10x faster), and a slew of other new features and fixes. Here’s the whole list, in no particular order:

  • renamed Tick to Ticker
  • adding a listener to Ticker twice will now move it to the end of the listener list
  • added Ticker.getMeasuredFPS()
  • added Ticker.setFPS()
  • renamed Stage.tick to Stage.update and made Stage.tick point to Stage.update
  • made the pauseable param “true” by default on Ticker.addListener()
  • added Stage.toDataURL(backgroundColor, mimeType)
  • renamed Rectangle.w/h to width/height
  • improvements to commenting and documentation
  • formalized inheritance model to make code more readable
  • changed color to null instead of 0 in Shadow.IDENTITY
  • fixed an error with simple sprite sheets that weren’t set to loop
  • implemented “tiny” instructions for Graphics. (ex. myGraphics.f(“#0FF”).c(x,y,r) )
  • fixed problems with Graphics.clone()
  • fixed bug with passing instructions to a Graphics object constructor
  • complete rewrite of the render engine to be cleaner and more flexible
  • added .decompose() method to Matrix2D
  • added .skew() method to Matrix2D
  • added .skewX/Y on DisplayObject
  • added SpriteSheetUtils.extractFrame(spriteSheet,frame) method
  • added basic multi-line support for Text
  • added DisplayObject.suppressCrossDomainErrors property
  • complete rewrite of the hit testing system to be cleaner and run 5-10x faster
  • improved the interaction model:
    • added .onPress, .onClick callbacks on DisplayObject
    • removed .mouseChildren from Container
    • made .mouseEnabled true by default
    • added .onMouseDown, .onMouseUp, and .onMouseMove callbacks on Stage
    • added MouseEvent
  • Stage.getObjectsUnderPoint() has been moved to Container
  • added Container.contains(child) method
  • added DisplayObject.compositeOperation
  • added appendProperties() and prependProperties methods to Matrix2D
  • added DisplayObject.hitTest() method
  • added stage.snapToPixelEnabled and displayObject.snapToPixel
  • added DisplayObject.updateCache()
  • renamed minified file from easeljs.js to easel.js
  • Re-factored directory layout

Check out for more info or to grab the latest build.

EaselJS v0.2 Released for HTML5 Canvas

I’m happy to announce that I’ve just released EaselJS v0.2. The focus of this release was on making drawing vector shapes and text to the HTML5 canvas easier with the new Graphics and Text classes. I also added Point and Rectangle classes, some new examples, put in support for multiple params on add/removeChild (ex. addChild(child1, child2, child3) ), added some minor fixes for mobile, and squashed a few bugs.

The next version of Easel will focus on performance improvements, architectural updates (finalizing an inheritance & event model), and improving/formalizing the mouse interaction model. I will likely put 0.3 up on GitHub, and open it for contributions.

As always, you can grab the latest version of the open source EaselJS library from

Easel JS Simplifies Working with Canvas in HTML5

The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of display objects, so you are required to manage updates manually. The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much simpler.

We built Easel based on what we learned while building Pirates Love Daisies, then retrofitted the game to use it. Development on the project would have been a lot simpler if we had Easel from the start.

Easel is being 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.

Examples, API documentation, and the latest version of the library can always be found at

Easel is currently in early alpha. We will be making significant improvements to the library, samples, and documentation over the coming weeks. Please be aware that this may necessitate changes to the existing API. We will also be moving it to Google code or GitHub and opening it to contributors once we feel like it’s in a decent beta state.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

We welcome feedback on the library in the comments below, at least until we get something more permanent in place.

Source Code: Image gOOifier

I promised I would be blogging and releasing more source code soon, so here’s a start…

A while back I posted my “gOOify Mike Chambers” Flash 8 experiment, which let you distort an image by “pushing” the pixels around with your cursor – similar to Kai Powergoo or Photoshop’s liquify command. Since then I have had a lot of requests for the source code, so I cleaned it up, and you can download it below.

Feel free to modify it and use it in your non-commercial projects (attribution/credit is appreciated, and I would love to see what people build with it). If you’d like to use it in a commercial application, send me an email and we’ll work something out.

Click here to download the source code.