About
This library provides functionality to manage and interact with the content of a html5 canvas element. It emulates layers and items that can be manipulated and managed and provides mouse-events to the items. This library is inspired by Michael Camden's layered-canvas-library but I made this one a little more compact, skipped some features, added some and tried to streamline the way the lib is interacted with. It is built utilizing many features of the MooTools javascript framework which is responsible for reduced filesize, great OOP and flexible events.
Features
- CANVAS: static object that is a collection all layers, items and threads and provides access to the canvasObject. Also provides mouse-events to all items
- LayerHash: various methods to manage layers and their position inside the stack
- Layer: a class that creates a container for items
- CanvasItem: a class that creates an object which is finally drawn to the canvas
- Cmorph: animation class that works with any of object
- Thread: class that provides a complex timer object
What MCL does
- MCL provides an easy to use interface for managing layers and items on a canvas object.
- MCL enables you to use basic mouse events and provides drag'n'drop support for items.
- MCL can be customized easily as it's (almost) entirely based on MooTools classes.
What MCL doesn't
- MCL will not make html5 canvas work in older browsers. Try explorercanvas (ExCanvas) for that.
- MCL will not provide you with advanced drawing methods. You will have to use standard canvas methods to draw your content. Of course you could easily implement methods like move or rotate to the items by extending their class (or simply implementing the methods... see the docs on Class for more information). To learn how to draw using the native canvas API have a look at the MDC canvas tutorial.
- MCL does not work with jquery, prototype, ext, yui etc. I chose MooTools because it offers great OO features and event support.
iPhone, iPpad, Android?
MCL should run on any platform that supports canvas and javascript. Mouse-events will of course be limited but you can try Chi Wai Lau's solution to have the mouse-events converted to touch-events on devices that provide such events.
What else
If you are looking for more complex or turn-key solutions check out the Javascript InfoVis Toolkit and Raphaël. If you are interested in game development using html5 canvas don't miss Akihabara, a very nice toolkit which already covers mobile device input and much more.
Feedback
If you have questions, bugs or suggestions regarding send me an e-mail: mtillmann+mcl@gmail.com or use github.
Next steps
While working on this I thought that instead of simply supplying layers and items a clone of actionscript 3's DisplayList/DisplayObject model would be nice to have.
Also I'd rather have the main object as a MooTools class instead of the static object as it is now. I tried but ended up in scope/binding hell and so I decided to go with Michael Camdens idea of having a static object.