Page 1 of 2 The upcoming HTML 5 specification introduces a number of new elements and features that web developers have been longing for for years. Among these new features is a seemingly quiet player called the Canvas element. Don't let its bland name fool you though, as this element certainly packs a lot of unexpected punch! Today we're going to begin our exploration of the Canvas element with a quick intro to find out just what exactly it is, why we're going to be interested in it, and how to actually use it.
As the name implies, the new Canvas element (<canvas>) is simply a blank drawing surface. What's interesting about it though is that you can draw on it, copy images onto it, or manipulate it in any way you like, in real time using JavaScript. This means you can use it for rendering graphs, performing animations, or any number of other graphical tasks, all without needing an external plugin or separate application. The best way to think of Canvas is to think of it as "classic Flash" (you know, back when Flash was a tool for drawing and animations, rather than the beast of a complicated application development framework that it is today!). You can perform all of the same tasks that you used to, such as drawing vector-based shapes, overlaying and clipping/compositing images, and so on, but without the need to use Flash or have the Flash plugin installed.
The real trick to Canvas is its long term potential. At the time of this writing, September 2009, HTML 5 is still only in draft state, and the Canvas element, while being moderately well supported, isn't quite as ubiquitous as other web technologies, such as CSS. However, because it's integrated into the web standards, as newer browsers are released this support will increase. That's not the kicker to things though; the real trick here is that Canvas has a huge amount of potential for the mobile web.
This shows through in two aspects. First off, because it's implemented natively into browsers there's no need for external plugins. In the mobile world this is a huge plus because it means any mobile device shipping with a modern web browser will support it directly. There's no need to wait for a partner company to create a customized version of a plugin, there's no extra licensing fees, anything like that. Look at the state of mobile web devices today: The IPhone (and IPhone 3G/3GS) is the big player in the North American market, but has absolutely no plans to support Flash now or in the future. Other devices entering the market now, such as the Palm Pre and the Nokia N900, have been back and forth about Flash support, but thanks to Adobe's unilateral control over Flash players, are usually stuck with older versions or in perpetual "the new one will be available one day soon" states. Contrast this to the fact that all three of those devices' native web browsers support the Canvas element. Don't get me wrong, I'm not saying Canvas will replace Flash for your web development needs; rather, that for vector and image drawing and manipulation, Canvas is probably a better choice. Leave the heavy Flash work for when you really need it, and enjoy the benefits of a broader mobile audience because of it.
The second aspect that really brings Canvas into its own is the upcoming WebGL standard, which looks to bring OpenGL ES 2.0 3D technology to web browsers. If you're not familiar with all the terminology, basically it boils down to this: at the moment Canvas is used for 2D rendering; in the very near future you'll also be able to use Canvas in order to do Hardware Accelerated 3D rendering. And if that's not exciting enough, keep in mind that this is the type of Hardware Acceleration present in all three of the previously mentioned mobile devices! The potential to create smooth executing 3D interfaces on a mobile device from a web page... now that's enticing!
Keywords
HTML5, Canvas Element, mobile web, vector graphics, javaScript
