Want to contribute a demo? Email josh (at) joshstrike.com.
If you use StrikeDisplay, please donate and keep the project going!
Donate with Bitcoin: 1ANkrqM7CfGrap7fyini3rBRjFfPerQYD1

...or Paypal:
Filters
By Josh Strike, January 2012.

A preview of the very powerful filter and caching system built into StrikeDisplay 1.0.
Ark-Type Demo
By Josh Strike, March 2010.

The first simple game demo to use StrikeDisplay for Canvas. Note that the blocks and background are drawn with code, while the paddle and ball are image files drawn into the canvas and the score counter is a div added to a Sprite. Tween effects are all done on the Sprite level, and the loop uses an enterFrame event timer provided by the stage.
Clip/Mask Demo
By Josh Strike, October 2010.

Newly added for v.0.9a5 -- clipping Sprite on Sprite in a single canvas. nb. Chrome does not handle multiple closed paths as a single clipping mask properly -- it tries to close the whole thing as a single path, resulting in artifacts. View in FF for best results.
Simple MouseEvents
By Josh Strike, March 2010.

Quick example of AS3-style parent-child relationships, automated mouse events and boundary finding that takes place automatically in StrikeDisplay.

Friday, March 12, 2010

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!