gSkinner - Home

Easel JS Simplifies Working with Canvas in HTML5

Posted on December 17, 2010 by Grant Skinner

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 EaselJS.com.

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.

Follow @gskinner on Twitter for more news and views on interactive media.
32 Comments

Awesome, today I spend the day doing/learning JS after a day with ProcessingJS, and was wondering about a library that could allow me to work more like Flash does.

Thanks a lot!
- rS

Posted by: Ricardo Sanchez on Dec 17, 2010 10:22am

It looks neat! It seems that flash devs are convinced by the power of HTML5. I am gonna play with the API right away. Thanks for making my weekend a perfect one :)

Posted by: Debabrata Acharjee on Dec 17, 2010 10:36am URL: http://debabrataa.blogspot.com

[...] This post was mentioned on Twitter by Grant Skinner, John Dowdell, Mike Downey, Kai Hannonen, Estes Ethan and others. Estes Ethan said: RT @gskinner: A little more info about the Easel JS release: http://is.gd/iUqWi #HTML5 #JS #javascript [...]

Posted by: Tweets that mention gskin… on Dec 17, 2010 10:39am URL: http://topsy.com/gskinner.com/blog/archives/2…

This looks awesome, might move some code away from Raphael JS into this. Thought about putting it up on github?

Posted by: Tys von Gaza on Dec 17, 2010 10:41am

This is awesome. The display object hierarchy is something I really like in AS, and in case Flash was overshadowed by HTML5 someday, I would really miss it. AS3 is just too great to work with, that's why I'm not very keen on HTML5. But this library might change my mind. Thanks Grant.

Posted by: Pablo on Dec 17, 2010 10:46am

Wow! Interesting!

Posted by: David Jumeau on Dec 17, 2010 10:50am URL: http://blog.geminilearning.com

are you guys open to contributions?

Posted by: Keegan on Dec 17, 2010 2:51pm

keegan - yes, definitely. Our current plan is to get out one more release, so we can clear a few things off our to do list and polish up the core architecture. With that done, we'll move it to GitHub to make it easy for anyone to contribute to.

If you'd like to contribute before then, feel free to fire me an email (the contact link at the top left).

Posted by: Grant Skinner on Dec 17, 2010 2:53pm

[...] is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in [...]

Posted by: *drawlogic » EaselJ… on Dec 17, 2010 11:12pm URL: http://drawlogic.com/2010/12/17/easeljs-html5…

[...] library JavaScript, desarrollada por Grant Skinner, para trabajar con el canvas de HTML5 como si se tratase de una aplicación Flash; eso sí, [...]

Posted by: Easel, de Grant Skinner. … on Dec 19, 2010 12:59am URL: http://www.coconnut.com/blog/2010/12/19/easel…

Great idea to do this, thanks! We have had half an eye on canvas as a mobile cross-platform vehicle for a little while now. I am curious; what IDE do you use for this kind of JS programming?

Posted by: Tom Gooding on Dec 19, 2010 1:08pm URL: http://www.quickthinkmedia.co.uk

Sorry - read the PLD post and I see you are using DW. Doh

Posted by: Tom Gooding on Dec 19, 2010 2:00pm

[...] Graphing Library Easel JS: A Javascript Library for Working with the HTML5 Canvas Element. (via gskinner.com: Easel JS Simplifies Working with Canvas in HTML5) MooTools Canvas [...]

Posted by: HTML5 Canvas Javascript L… on Dec 20, 2010 3:03pm URL: http://savetimeon.com/blog/html5-canvas-javas…

[...] objects. Grant and his team have put together a utility that adds this Flash- like functionality: EasleJS. Check it out and let me know how it works for [...]

Posted by: Grant Skinner’s Eas… on Dec 21, 2010 8:16am URL: http://jufa.wordpress.com/2010/12/21/grant-sk…

[...] to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical [...]

Posted by: Easel JS Simplifies Worki… on Dec 21, 2010 1:50pm URL: http://www.websiteproblems.co.uk/easel-js-sim…

[...] to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical [...]

Posted by: Easel JS Simplifies Worki… on Dec 21, 2010 2:15pm URL: http://www.neurosoftware.ro/programming-blog/…

[...] to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical [...]

Posted by: Media Blog » Blog A… on Dec 21, 2010 2:16pm URL: http://media.tradesstockonline.info/2010/12/e…

[...] Adres URL: gskinner.com: gBlog: Easel JS Simplifies Working with Canvas in HTML5 [...]

Posted by: gskinner.com: gBlog: Ease… on Dec 22, 2010 6:15am URL: http://js.darmowe-blogi.pisz.pl/bez-kategorii…

Shape.arc() method needs to pass 'radius' value to the context.arc(), no?

Posted by: megurock on Dec 24, 2010 5:07am

[...] to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical [...]

Posted by: Easel JS Simplifies Worki… on Dec 24, 2010 5:45pm URL: http://alterrygough.com/2010/12/easel-js-simp…

[...] to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical [...]

Posted by: Easel JS Simplifies Worki… on Dec 30, 2010 7:16am URL: http://forexride.com/easel-js-simplifies-work…

[...] to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical [...]

Posted by: Easel JS Simplifies Worki… on Dec 31, 2010 2:48am URL: http://msweb-solutions.com/archives/79

I know you're working on the graphics API stuff, but have you given any thought to redrawing the canvas with a dirty rectangle kind of algorithm? Would it even be possible to solve for the bounds of a DisplayObject before its drawing commands are handed to the 2D context?

Posted by: Rezmason on Jan 2, 2011 9:00pm

Can´t wait for the right moment (stable version) to start working on a JSFL based export from Flash IDE.

Posted by: ArneO on Jan 7, 2011 5:13am

BitmapSequence.js: In line 101 Undefined variable ttllFrames (I assume this would be ttlFrames)

Posted by: mg on Jan 16, 2011 4:48pm URL: http://triforce.com.br

This looks great Grant - thanks for sharing! I definitely want to dig into this more, since I started going down the road of writing my own framework for working with canvas efficiently.

Posted by: Mike J ( exorcyze ) on Jan 19, 2011 10:50pm URL: http://mx.coldstorageonline.com

I'm new to canvas but not JavaScript, and am curious about something. In Pirates Love Daisies why did you choose to have the game utilize the DOM as much as you did (e.g. divs for various UI components) instead of putting everything in one big canvas element?

Great job BTW the game looks like a blast (I'd play it now at work if I could get away with it).

Posted by: Josh Naro on Jan 21, 2011 3:01pm

[...] Guru) has made a js library, EaselJS, that's loosely bases on the Flash display list.More info:http://gskinner.com/blog/archive...http://www.mikechambers.com/blog...Insert a dynamic date hereView All 0 CommentsCannot add comment [...]

Posted by: Javascript Frameworks: Is… on Jan 23, 2011 4:49am URL: http://www.quora.com/Javascript-Frameworks/Is…

Love it, love it, love it!

Confused, though.

Stage's prototype is a Container, whose prototype is a DisplayObject. All of their constructors call this.init(), but the Stage's init called this.__init() which is a call back for init(), and Container's init calls this._init() which is a call back for init()

I guess I don't understand how this bypasses JS's inability to perform multiple inheritance.

Posted by: 12dCode on Jan 25, 2011 5:36pm

Does anyone have a suggestion how I can get hold of the width and height of DisplayObjects?

It's getting really frustrating trying to work this out.

Thanks for your effort on producing this library, makes life for flash devs a little easier when working with canvas.

Neil

Posted by: Neil on May 16, 2011 9:05am

[...] is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in [...]

Posted by: EaselJS html5 Flash-like … on Jun 7, 2011 6:12am URL: http://www.publicclass.net/2011/06/07/easeljs…

Dear Grant,
You did a really great job and i hope that easel will supported further on. I'm developing in flash since 1998. The canvas element is very interesting but many missing features, like events for images and drawn elements, are very sad. After working with easel for a couple of hours i feel like coming home.....

Thanx a lot for sharing.

Mark

Posted by: mark on Feb 8, 2012 11:24am URL: http://www.sector12.de

Leave a Reply

Your email is never published nor shared.




You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>