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.
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:
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:
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.
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.