A Couple of Cool Canvas Demos

Canvas is a HTML5 element that allows for 2D shape and bitmap drawing and animation. I haven’t done anything with canvas yet (at least not anything useful), but I’ve been keeping an eye on it. Here are a couple of cool demos posted on Canvas Demos this week.

The first one you’ll want to run in Google Chrome. It works in Firefox, but it’s slow. It’s a journey through the universe, complete with a soundtrack (via the HTML5 audio tag). The source code is on Github. The author said he wrote the whole thing from midnight on a Friday to Saturday afternoon, which means I officially hate that guy.

This next one is a tutorial on building a drawing application with canvas. It’s a great tutorial on using the canvas element, and it’s amazing how little code is needed to get such a nifty product.

Donning my swami hat and peering into the mists and…whatever, here’s what I think:

• In 2-3 years we're all going to be using canvas for our web apps. In that time the toolkits/frameworks will be better, browser hardware acceleration support will be better, and IE9 will (1) hopefully be out and (2) hopefully not have a busted canvas implementation. I think Microsoft is going to get this right, and boy does it hurt to say that.
• Aside from the Flash/Silverlight apps I've seen that have any business being Flash/Silverlight apps (maybe 5%), there will be a chorus of ringing, Homeresque head-slaps for heading down that road.
• The Panthers are going 11-5 this year and getting to the Superbowl. That's right, I said it.