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.
| Want to contribute a demo? Email josh (at) joshstrike.com. If you use StrikeDisplay, please donate and keep the project going! Donate with 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. |
