10.01.08
Drawing the line
One of the problems with adopting the current set of web technologies is that it’s not possible to draw a diagonal line or a circle, or other two dimensional primitive using Javascript and HTML4 alone (I.e in a standards compliant way).
Many people bitch about Flash being proprietary, but until recently it was the only credible option for doing anything more advanced than laying out boxes of text and images.
An application such as Google Maps avoids using Flash, but streams pre-rendered tiled images: It doesn’t draw all contours of the streets in the web browser. While this approach works well for google (the client implementation is fairly simple), it doesn’t make much sense to use this approach for applications such as Google Finance, where stock price graphs can be zoomed in and out. In fact, Google use Flash for the later.
Just to make sure you understand the problem. Imagine the creating a simple analogue clock face using HTML4. Since the hands of the clock are drawn at all angles, the turning hands would have to be supplied as individual images (up to 60 or for each hand!), and the second, minute and hours hands layered on top of each other. It might sound like a crazy waste of resources, but I’ve seen it done this way several times despite computers being able to programmatically draw lines for over fifty years.
Take a trip over to the “web2.0″ BBC home page and you will notice that whole page is rendered using Javascript+HTML except the lovely old style clock which has been supplied as Flash movie. (right click on the clock to see the Flash menu)
The Canvas
When Apple adopted WebKit for their DashBoard widget. They were faced with this very problem : how do you draw clock faces, CPU dials. Thermometers and so on, with a technology which doesn’t support basic drawing? Forcing programmers who want to draw arbitrary lines and text using the horrid SVG is very cruel and so Apple decided to slip in their own proprietary “Canvas” tag.
The canvas element basically tells the web browser to reserve a rectangular area of a certain width and size within the web page and leave it blank. Javascript can then get a handle to a particular canvas object by ID and can issue 2D drawing comments for drawing lines, rectangles, circles, text : all the commands familiar to developers using Java, Flash or any other environment which supports the notion of a Graphics context.
Inventing new HTML tags is a bit cheeky really, since it fragments and might give some people the impression that the “standard” technology can do more than it’s really capable of. But luckily, Mozilla and Safari co-operated and worked to get Canvas standardised in the forthcoming HTML5. I believe that Opera supports it in it’s latest browsers but currently IE only support canvas through plugins.
Being based on WebKit(Apple’s browser engine), the S60 browser and widget runtime should support Canvas. However, I tried some canvas test on my E61 and it didn’t work. My E61 is pretty old software now so I’ll have to get hold of a more recent device to find out.
The introduction of a single tag may seem like a small addition. But now we can finally have animated clock faces (aren’t they beautiful). And more over, applications such as Google finance could potentially be ported to standards based APIs.
Google would love to move away from a dependence on Flash I’m sure, and so Apple have helped them a lot here. It also means that even the simple use cases such as drawing pie charts in an Excel knock off will be possible using the Canvas API, which again adds weight to Google’s Office offering.
Proponents of SVG say that Canvas is against the spirit of the web : Anything text drawn on the canvas will not be indexed by search engines since it’s all painted as needed, and elements within the Canvas cannot be accessed from the DOM. But while SVG works ok for content designed using graphics tools, it’s totally stifling and slow for programmatic graphics.
Canvas is also more mobile friendly that SVG. It makes it much easier for vendors to hardware accelerate drawing operations, which means it could be layered on top of the OpenVG API to improve the performance of web apps on mobile devices.
Personally I welcome Canvas. After all the madness of fiddling around with CSS and HTML DIV elements across different browsers. It’s nice to be 100% in control of what happens in that reserved area of the screen and knowing that eventually all browser will support it.
I think people are beginning to see that the right solution to a problem doesn’t necessarily have to involve XML.
Side note
Obviously 2D opens up the doors for 3D libraries and some demos have started to appear. http://www.tapper-ware.net/canvas3d/