Canvas element: first impressions

This post was written by jimrobson on November 18, 2007
Posted Under: Browsers, Canvas, JavaScript

Recently my boss asked me to look into Apple’s Canvas HTML element, and I must say I am very impressed by the exceedingly cool things that various developers have accomplished with it. For example, a company in Connecticut called Emprise has made some killer charting components.

However, to make it interactive you need to use JavaScript, and I am still leery of JavaScript for a number of reasons. One reason is it is clumsy and ugly to work with if you try to write object-oriented code. Another reason is that it tends to be heavy and slow, and complex JavaScript apps tend to crash browsers from time to time. But perhaps the most important reason is that you’re at the mercy of the browsers. If you go through the work of building a beautiful RIA that works flawlessly in all major browsers, you may yet find that it fails when one of the browser developers comes out with a new version.

This happened to me recently with WordPress (my blog software). It is very cool software, and I enjoy working with it very much. However, a while back (about a month or two) it suddenly stopped working in Firefox, which is my default browser. I was still able to create posts using IE (which I hate) but got no joy from Firefox until recently when Firefox issued one of their periodic updates. So it appears that a minor browser update caused WordPress to break, and a subsequent minor browser update allowed WordPress to function normally again. I would say that this is weird, but in my experience it is the norm when dealing with JavaScript and browsers. It’s simple math: (Heavy Reliance On JavaScript) + Browsers = Major Headaches.

In the case of the Canvas element, it’s not supported by IE - which is not too surprising when you remember that Canvas was developed by Apple. While I’m very thankful that IE has lost some of its dominance, it is sadly still the most widely-used browser. So if you’re going to build something for the public Web, it ought to work in IE.

It’s true that Google has created a sort of glue layer that ports the Canvas to IE. However, this adds some overhead to the application. As a case in point, the developer of the plasma demo was not able to put out a version that worked in IE because the additional overhead would have been too much. Based on my experience with the Google Web Toolkit, I can believe that the overhead would be significant - and the plasma demo bogs down my system as it is.

Another very cool implementation of the Canvas is the hyperbolic tree . However, it doesn’t work in IE, either. And like the plasma demo, the tree bogs down my system (FF2, WinXP Pro SP2 on a ThinkPad T60 with a T7200 Core 2 at 1.99 GHz and 2 GB RAM).

Let’s get back to Emprise’s charts, which as I noted above are extremely impressive, and they do work in IE. Or do they?

I ran some quick tests of the reference implementations posted on the Emprise site, and found some inconsistencies between how they work in Firefox or Opera, and how they work in IE. Let me start with a very minor one. This is a screen shot of how the chart featured on the Emprise Charts home page looks in Firefox 2 or Opera 9:

Emprise sample chart in FF and Opera

Notice how the label for the Y axis is rendered: the letters are oriented horizontally, but they are arranged vertically, so that you read from top to bottom. Now look at the very same chart in IE6:

Emprise sample chart in IE

You can see that the letters in the Y axis label are oriented and arranged vertically, and they read from bottom to top. Also, if you look closely you will see that the font inside the Chart Legend panel is quite different than what is displayed in Firefox and Opera. I’ll admit that these are minor cosmetic differences - but they may be significant to designers in some implementations.

Now let’s look at a more significant issue. The Chart Legend panel noted above is dragable (which is very nice). Since this is JavaScript and not Flash, you can drag it anywhere on the page you like; it will float nicely over any of the other HTML elements on the page - unless you’re in IE. When you drag the panel over some plain HTML text as shown below, you run into problems.

Emprise sample chart IE bug

In the screen shot above, the Chart Legend panel was no longer functional. When I put my mouse cursor over it, the cursor turned to an I-beam. I could no longer expand or drag the Chart Legend; it had become nothing but an eyesore. Again, this only happened in IE; the panel worked fine in Firefox and Opera.

These issues may seem minor, but keep in mind this is a reference application put up on the developer’s website to sell their software; presumably this is as well-done as can be, and built in a clean and predictable environment. What will happen in the real world, when you have to face unexpected obstacles and weird requirements? My experience tells me that I will almost certainly face more serious issues in real-world development than whatever appears in the vendor’s demos.

In short, my initial impression is that the Canvas element has tremendous potential, and a number of very talented developers have done amazing things with it, but I still don’t think it’s ready for the public Web. If you’re building an enterprise application in an environment where you have the power to specify which browsers are to be used, then maybe you have a shot. But even then, remember that your killer app may quit working when the next browser version is released - so make sure you specify the browser version as well as the browser.

Reader Comments

Best of all, in a few years when IE 9 and Firedfox 4 are released the odds are NONE of these apps will work.

That said, you can still view almost every Flash app in the latest versions of Flash player.


Written By Jason The Saj on November 19th, 2007 @ 12:42 pm

Jason - you raise a good point about the Flash player. Macromedia / Adobe have done a great job of maintaining backward compatibility. Flash movies I built 8 years ago (in Flash 4) still work in the latest version of the player, even though I haven’t touched them since they were first published.

Written By jimrobson on November 20th, 2007 @ 4:45 pm

Hey Jim, check out Vlad’s work shoehorning Canvas into IE.

Mozilla’s trying to help free up the web even if it means improving IE :).

Written By Bret on August 12th, 2008 @ 11:55 am