I've been checking out the new canvas tag that's scheduled to be a part of HTML 5, the next specification of the web markup language. And I'm pretty impressed. The Mozilla guys have been doing some neat work with the Canvas and have a nice documentation ready for Canvas 2D: here. If you're reading this in Opera, Safari or Firefox, you've already got Canvas supported and running in your browser! Internet Explorer, of course, doesn't have it. But the folks at Google have written a neat thing called Ex Canvas, which allows you to just include an extra javascript file and have your code running in Internet Explorer too! I think the Canvas tag has some potential of being really accepted and supported by all the browsers, which means that its good for developers like us who crave for atleast ONE technology supported properly across all the browsers, apart from the standard (or rather, now not-so-standard) 'b'; tags etc. :-) So I think developers can actually put their money on the Canvas tag and not worry too much about support and implementation across browsers. Face it: three out of the four 'major' browsers have Canvas already running. And there is a Google hack that lets you run it in the fourth (now) so-called 'major' browser.
The other (really) interesting thing I've been checking out is the next-step: Canvas 3D! The guys at Mozilla have been working out the basics of a simple 3D library and have so far adopted a wait-and-watch strategy i.e. have implemented a basic library (which is scheduled to be shipped with the Firefox 3 release) that exposes the API of the OpenGL ES specification and makes use of hardware acceleration where possible and are watching what kind of uses the developers put it to, in order to determine the next features to add. Now this is really interesting news, as OpenGL ES is something I've been looking into for the past few days, and find it a tad better for me than the standard OpenGL implementation, as it is lighter and more streamlined. OpenGL ES by the way is OpenGL for Embedded Systems, which means that all the extra bloated code and old deprecated methods and fat around the OpenGL standard has been stripped off, leaving a light API for systems with limited resources. The guys at Opera have been working on a different approach however. They too have implemented a Canvas-3D implementation, but they don't make use of OpenGL bindings, instead provide a higher-level of abstraction allowing platform neutrality, i.e. permit non-OpenGL programmers to be able to use it too. While this is a nice idea, trouble will arise if the two major browsers decide to implement their own versions of Canvas 3D. And where does Microsoft fit in? I think they'll be willing to Open Source all their Windows code before they will ever think about implementing OpenGL (arch rival to their proprietary Direct3D) in their browser. So they might either make D3D bindings, or adopt a 'high-level/neutral' approach similar to Opera. Which essentially means that Canvas3D, as such, is still volatile and is a high-risk platform to develop for. But it is the most promising of the upcoming technologies as it incorporates hardware acceleration which will make life tonnes easier.
For instance, I wrote a simple z-buffering system in Javascript for a non-canvas based experiment, and it simply is TOO slow as the DIV hacks, as I mentioned in a previous post, are just not feasible for even a thousand triangles. Z-buffering, however, can be made to run really well in the Canvas2D platform. The Useless Pickles 3D demo crawled to a halt (0.4 fps) when I fed it with objects with slightly over 200 triangles, which is peanuts. And that 3D library/demo is the best attempt I've found so far on the internet. Agreed that when I looked under its hood, it didn't make use of anything other than simple backface culling for optimization, but even if approaches like BSP Tree with front-to-back rendering or Octrees for optimizing Frustum Culling etc are applied, there is only so much that you can do. The potential for the sort of things that can be done with Canvas & Canvas3D is far greater and I think its better to push with new technology than be really clever with the old one and remain at the stage of just proof-of-concepts.
PS: The picture at the start of the article is the Apple Mac OS X Webkit's icon. The entire concept of Canvas started with them.
Edit: I have been trying out the Google Ex-Canvas that enables code written for the Canvas tag to run in Internet Explorer too, and all I can say is: It is SLOW! Just to warm up the testing, I made it draw 60,000 (i.e. canvas size = 300 x 200) single black pixels at each position in order to fill the canvas block entirely with black (yes I know it can be done with a single fillRect command, but I'm testing things here remember?), and Firefox 3 (rc2) did it within 400 milliseconds, while Internet Explorer 6 took almost 7-8 seconds, not to mention hung while doing it. Can't expect much out an emulation, can you?
