Opinion: As we move toward more standards, we move closer to the holy grail of universal compatibility across browsers and platforms.It really hasn't been that long since AJAX took the Web development world by storm and disrupted much of how we think about delivering Web-based applications.
Its implications have been far reaching, catapulting Google Maps into the popular parlance and forcing companies like Microsoft to begin to radically change their models by delivering software via Web services and developing sites like the new Live.com.
Developers everywhere are scrambling to understand and implement AJAX-based applications. It looks like it may be one of those rare new technologiesor old technologies successfully revitalizedthat make us rethink how we publish and develop for the Web.
But while many of you have started to become familiar with the power of AJAX, you may not know about the canvas tag.
Originally implemented in Apple's Dashboard technology and subsequently worked into the Safari browser and now the latest (1.5) version of Firefox, canvas allows you to draw directly to the browser window using JavaScript.
Rather than implementing user interface elements using images or simple CSS forms, developers can now draw user elements directly to the screens of Firefox and Safari users, opening up a whole new realm of design and development possibilities utilizing what will become (if the Web Hypertext Application Technology Working Group gets its way) a new browser-based standard.
What can you do with canvas? One of the best places to start looking into this new tag is on the Mozilla Developer Center, which has a good (if somewhat limited) tutorial on the use of the tag.
But before you dive in, you might want to fire up either Safari or Firefox 1.5+ and take a look at some examples. First, check out Antoine Quint's work, especially paying attention to his well-rendered tiger.
Sure, it doesn't look all that exciting when you view it (it's a nice clip-arty version of a tiger), but if you view the source, you might get a bit more excited. Quint isn't loading an image into the browser; he's drawing the shapes directly to the screen using JavaScript and a set of coordinates.
But canvas isn't just for static pictures. If you really want to get an inkling about what it's good for, check out this interactive 3-D maze created using canvas and some simple raycaster code. It may not want to make you dump your copy of HalfLife 2, but it hints at some pretty cool possibilities to do some cool stuff in the browser without having to resort to plug-ins or Flash.
But don't think that AJAX and canvas are where development has stopped. The WHATWG is working on redefining a whole lot of what we can do with HTML (there's a great overview article here that includes even more demos), including an enhanced Web Forms 2.0 standard to improve the functionality of forms on the Web and a Web Applications 1.0 standard to include new layout elements and programming enhancements (canvas is included in this standard).
Together all these enhancements move us one step closer to being able to develop truly interactive applications on the Web that behave much more like applications we're used to on our desktop.
Better yet, as we move toward more standards, we move closer to the holy grail of universal compatibility across browsers and platforms (imminent releases of IE 7 aside). As I've written before, standards are good for both developers and consumers, making life easier and more productive for all of us.
These new features, if implemented as Web standards, will make the revolution of Web-based services and applications that much more likely.