HTML5 Canvas Object Framework

Stage.JS: The Lightweight and Scalable Canvas Framework 


Description:


Stage.js is a Framework which manages object creation and manipulation. It has the ability to add event listeners to objects and you can create your own packages for Stage.js then add it directly to the stage framework.  The syntax is standard Javascript and does not use any other third-party library. 


Stage.js works with a Sprite Object which is provided with the framework. You can extend this Sprite and create your own custom objects. Stage.js has a built in extend method making  it easier to create objects.


Create A MovieClip (animated sprite sheet) with the MovieClip Object.  


Code Repo: https://github.com/fahimc/Stage

Stage API and Tutorials: https://github.com/fahimc/Stage/wiki


Example Below:


Use the keyboard arrow keys to move the target and 'enter' is to shoot.


link: http://fahimchowdhury.com/test/html5/canvas/demo/shooting/index.html




Object Creation Code Example:


                box = new Sprite();
                box.color = "#f00";
                box.alpha=0.5;

box.drawRect(0, 0, 50, 50);

box.addEventListener("mousedown", mouseDown);

Code documentation coming soon!