What's StrikeDisplay?

StrikeDisplay is a novel SDK that lets you draw, animate and interact with "Sprites" inside a canvas, letting you code your javascript-for-canvas in a Flash AS3-like way.

Once you've put a canvas in your HTML document, you initiate StrikeDisplay with a single line of code that automatically creates a stage, display and event chains inside your canvas. If you named your StrikeDisplay object "root", you can then write the following Javascript:

var s = new Sprite();
s.graphics.beginFill("#000000",1);
s.graphics.drawRect(0,0,30,30);
s.x = root.stage.stageWidth/2;
s.y = root.stage.stageHeight/2;
s.alpha = 0;
root.stage.addChild(s);
var tween = new Tween(s,"alpha",EaseOut,0,1,10);

Which would draw a 30x30 black rectangle just off the center of the stage and fade it up over 10 seconds. Looks a lot like AS3, right?

You could then say something like:

var s2 = new Sprite();
s2.graphics.beginFill("#0000FF",1);
s2.graphics.moveTo(0,-30);
s2.graphics.curveTo(-30,0,-30,100);
...etc.
s.addChild(s2);
s.addEventListener("mouseOver",someFunction);

function someFunction(evt) {
   evt.target.alpha=0; //would hide either s or s2, depending which you moused over...
   evt.currentTarget.alpha=0; //would hide s, where the event was placed, no matter whether you moused over it or its child. Since s2 is a child of s, it would hide them both of course (alphas are chained up the display, too).
}

All of this is handled seamlessly, as is redrawing only the areas of the canvas that have changed. The canvas becomes your AS3-like stage, and you're ready to animate and code. There are tween events and mouse events, plus you can attach bitmaps to your sprites and animate those with the same beneficial mouse features and area redraws.

I hope you'll enjoy StrikeDisplay and contribute demos of what you do with it! If you make any interesting revisions to the code base, send them my way... and lastly, if you use it for a commercial site, please PayPal $1 to josh (at) joshstrike.com to say thanks!