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.
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
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 🙂
This looks awesome, might move some code away from Raphael JS into this. Thought about putting it up on github?
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.
Wow! Interesting!
are you guys open to contributions?
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).
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?
Sorry – read the PLD post and I see you are using DW. Doh
Shape.arc() method needs to pass ‘radius’ value to the context.arc(), no?
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?
Can´t wait for the right moment (stable version) to start working on a JSFL based export from Flash IDE.
BitmapSequence.js: In line 101 Undefined variable ttllFrames (I assume this would be ttlFrames)
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.
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).
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.
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
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