1.0 Released - finally.

It's been about a year...almost two I guess, and some things in the HTML5 world have gotten better. Some things in the Flash world have gotten worse, notably the number of decent jobs. Once again, pretty clearly, Canvas is not a replacement for Flash-style interactivity and blitting, and it never will be, because untyped languages are slower by definition, browsers are sucky replacements for an AVM, and about a dozen other really good reasons... but with a lot of optimization, it's possible to achieve some of the same capabilities, parlay your Flash skills, and keep the hype-monsters begging for your work. If only for another year. Don't worry, they'll be back to innovating in the barrista space by then if 2011 was any indication, and we can all go back to our jobs.

Meanwhile, here's something to do pretty much what you want. I've added textfields, including multiline fields with set widths and justification. I also added a good number of filters, including a full convolution filter and a real fast blur, bitmap caching, and a lot of other speed improvements. The result is something that on a Core2 Duo fairly approximates in Chrome what you'd see in Flash on say a fast G4. That might not be much to brag about, but it's not bad, considering the state of most of these things. All this in a couple thousand lines of code; it's definitely up to the task of writing 2D games with a flash-like feeling to them, and it certainly makes your life a lot easier if someone asks you to do that. Which is, really, the point of this exercise. Bosses ask for stupid shit, we make miracles look easy. Should I trademark that?

One thing I'd like to do with this, and haven't yet, is use it with a tiny canvas just as a nice way to move DOM objects around the whole page, because you can attach a div to any sprite with the sprite.graphics.attachDiv() call, and by extension move that div relative to the sprite -- even if the sprite's not visible on the canvas. And of course you could put other canvases in those divs. In that way you could make it a kind of master controller for a page, without ever dealing with the DOM, or directly styling div positions at all; just rotate or scale the sprites that are holding them like you would in Flash. I'll let you figure the rest of that one out for yourself.

Anyway, it's not a masterpiece, but it's a hell of a lot better than the rest of the crap that's out there. Please tip if you dig it... there's a Paypal link at the top of the page.

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!