KineticJS - HTML5 Canvas Drawing Made Easy

Eric Rowell, a front end engineer at Yahoo! created KineticJS - an incredibly powerful JavaScript library. Straight from the KineticJS website:

You can draw things on the stage and then add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations and transitions

In other words, KineticJS leverages the HTML5 Canvas API and gives you an easy-to-use interface for drawing. The six things that sets KineticJS apart (according to Eric):

• Speed (stress test)
• Event Handling (click, dblclick, touchstart, tap, etc)
• User Defined Layers (similar to Photoshop layers)
• Event Driven Architecture (attr change events, draw events, etc)
• Transitions (16 different transition types)
• Very Robust Text Support

KineticJS is growing very fast, and Eric believes it has a good chance of becoming a standard canvas framework for graphical applications in the future. Coming down the pipeline is support for the Filter object. Adding standard filters (blurs, glows, grayscales, etc) will be very easy, and can be applied to any Kinetic node (stage, layers, groups, or shapes).

Contributions are welcome, as long as they follow the style guidelines and don’t break the tests. If you want to get involved, head on over to the GitHub repository.

You can also go to the project homepage for more information, examples, documentation and more. If you are interested in how you might use the library with the HTML5 Canvas API, you can visit Eric’s website html5canvastutorials.com.