Been wanting to play with this for a while now. It’s a lot of fun, in an old school, AS1 type of way. I have a lot to learn, but was able to whip this up in an hour or so. Once you figure out how to get at the canvas and the context, it’s all pretty straightforward. Just like AS3, without the data types. Or classes. Or display list.
Use your mouse to click on this underlined text to see Canvas awesomeness.
No idea what browsers this might or might not work with. It does work with Chrome and IE9. Haven’t tested beyond that.
I’ll probably re-do some more of my old AS1 experiments, just go get a feel for things.
Oh, and though it should be obvious how to find it, the JS source for this is here.
very nice. I’ve been on the same wavelength recently. I’ve enjoyed how the new capabilities of html5 are bringing back the simple experimentation that remind me of flash 8 or so years ago.
It’s funny how this (experiments with canvas by long-time flashers) and hardware accelerated 3D in Flash is happening at about the same time.
Are we going to see a repeat of daily experiments but with Canvas? History really does repeat itself.
cool. of course it runs like crap on the ipad. interestingly it runs fairly smooth on the nexus S phone.
wow. really nice. runs beautifully on galaxy tab.
Cool to hear what it runs like on devices. I get about 4-5 frames on my iPhone 3GS.
WP7 browser is not HTML5 compliant (lame, I know), so I get nothing.
Nexus needs a recharge.
iPad has been confiscated by wife.
Runs nicely on Chrome and Firefox on Ubuntu though.
It worked on Firefox on Windows 7, but occasionally it slowed down briefly before speeding up again.
Nice one. Thanks for sharing. Runs smooth here.
Some browsers might don’t like line 80 though (debug console output).
Oops. That was not supposed to be there. Thanks. Removed.
How efficient will be such fake 3D with loaded 500 photos (transparent PNGs) instead stroked lines?
Not sure what to really think about this – recently the tech team in my huge ad company was so proud of animation created in HTML5 which looks like more than 10 years old Flash anim.
Keith, you should write new book: “HTML5 Animation” 🙂
It was bit surprised how smooth it run on my Opera 11, but it also took 60-90% of my CPU.
Hello Keith,
again thanks for this experiment!
I have a question which is maybe utter nonsense, because I have not worked with haXe and am not even sure I understand haXe’s use properly…
But would it be possible/interesting to make a mvc in haXe and then use the same model with a different view and controller to target to both flash and canvas/html5?
greetings, Stefan
I’ve never used haXe, so I can’t really say.
Hi Keith,
Just me thinking out laud. Have you hear of ruby koans (http://rubykoans.com/) or the code katas (http://codingkata.org/)? I know you are a very busy man but if you somehow find the time, I think it would be fantastic if you could organize some of your old code examples as JavaScript Katas or something like that. I would make a great learning resource and a lot more fun and aesthetically pleasing than most of the examples out there.
I’ve heard of them, but I don’t think I’m the person to do that for JavaScript.
Every major browser supports it.
And indeed, an awesome thing it is 😛
as a long time flash developer and has dipped my toe in the C realm, i felt indifference what i tried html5. i still couldn’t understand what hubbub, the performance is awful, cross browser issues is a nightmare, etc..
Hey Keith,
Have you tried the processing.js library? You can paste your Processing code directly into a script tag and the possibilities with Canvas are astounding (nothing like the old School AS1). And it works nicely on smart phones.
Cheers,
Phil