So Internet Explorer cannot do canvas yet. We can moan about this all we want but the fact is we are stuck in this situation until Microsoft speed up and provide it in a new release and even when they do, we still will have issues with backward compatability in older versions of Internet Explorer the granddad of browsers! I've seen many attempts to rectify this by providing a hack for canvas for Internet Explorer - the well know ExplorerCanvas and even some talk of some method using flash which I will be interested to see the results in.

Anyway, I've been playing around with canvas and the closest IE alternative that is native to the Internet Explorer browser - vml. I've used this in a recent project (GeoTiddlyWiki) and most recently for the rewired state event I attended. You can see my result (albeit a week later then the day) which is a chloropleth map of London council tax bands. For those who are interested there is a geojson of London powering it, which I have hacked together out of some kml data which should be useful for some other hacks you may have in mind.

Anyway... vml is completely different to canvas as it concerns dom manipulation whereas in canvas which takes a bitmap based approach where you make a series of calls to a javascript function and create an output. This is why I believe that trying to mimic canvas exactly by porting these javascript commands into vml based alternatives is flawed. The killer one is the canvas clearRect function. If you draw a clear rectangle over the top of a drawing you have done in a canvas object, it will be a quick command and won't make many differences to memory. However if you want to clear a vml based drawing this means hitting the dom hard by deleting each of the vml shape objects you have created for your drawing. A big drawing could have hundreds of dom elements in it. Imagine deleting 1000 divs in one go and your get the idea of the issue here. The other fact is ExplorerCanvas is a generic solution, therefore it can make no assumptions about how you are using it. For instance say in your canvas app you are drawing a smiley face and you are allowing the user to move the smiley face around the screen with a mouse click. The pseudo code will look something like this:


Now consider an ExplorerCanvas type alternative where we mimic each of these functions with a suitable vml based alternative...

Here it's not a big issue as it is a small drawing but here we are deleting 4 dom objects then creating 4 identical objects from the previous time EVERY time the user moves around the "canvas impersonator". Now consider an alternative where we create our own specific version targetting our drawing a smiley face app.


In this situation we alter the style of 4 objects rather than deleting and adding to the dom - a much faster operation. It also seems that modifying a dom element attribute is quicker than dom manipulation. If you have a look at the VML W3C Note on shape element you will see that coordinates in a vml shape are hardcoded into an attribute called path. Therefore instead of deleting vml shapes you need consider that modifying an existing shapes coordinates could be a much more performant way of rendering in Internet Explorer.

I guess what I'm getting at is that no generic solution to canvas in my opinion will ever bring you ideal performance. If you want good cross browser performance then I'm afraid being lazy and using an off the shelf product is probably not your best bet. Dive into the VML W3C Note on vml and get to know VML yourself (it's actually quite easy since it is just creating and styling dom elements) and see how css and reusing existing dom elements can bring a better experience to your poor IE users..