The last two days I've been looking alot closer at Googles ExplorerCanvas which uses vml to replicate the canvas object which is so tragically not supported by Internet Explorer. It's a good solution for small drawings but as soon as you begin dealing with lots of polygons (like I am in GeoTiddlyWiki) the performance takes a big hit, and many people therefore technology like Flash I feel just because it's too much hassle to improve that performance in canvas. I'm starting to see a solution of sorts.

Several weeks ago Jeremy Ruston made one of his predictions that I would end up tearing away ExplorerCanvas from the GeoTiddlyWiki plugin I am developing and create my own... and I must say I'm starting to believe him.

So this was the thinking... ExplorerCanvas creates vml shapes to represent canvas drawings. Creating vml shapes seems to take a long time and it is this reason why when you draw something in ExplorerCanvas on Internet Explorer you will notice a huge loading time difference. Users I believe can put up with this slower loading time. However the big pain point comes when you want to do animations in canvas. In canvas you usually do this by clearing the canvas and redrawing all over again with a new transformation. In ExplorerCanvas the result of this is you get that slow loading time as all the vml objects are created and put into place. This is when the user is going to get really irritated with your application.

There's another way, albeit is slightly limited. If you want to just to translations and scaling you can do this by simply working with the vml objects that have already been created. Instead of destroying them and recreating them where you can it seems a good idea to use the style property associated with each of those shapes.

ExplorerCanvas creates a div element inside the canvas element and this div element contains shape elements. Therefore by just iterating through these shape elements and altering the top, left, width and height properties you can perform your transformation operations much quicker in some cases (still not as fast as in normal canvas but much closer!).

To give some ideas I'll give you an insight into my experiment - I produced x amount of square shapes in two instances of a canvas. One performed scaling/translation operations in the same way as it does for standardised browsers with ExplorerCanvas dealing with them. A second canvas below this alters the style properties of the objects to mimic the action of scaling/translating.

Here are some results...

Number of Shapes	Action	ExplorerCanvas Time (ms)	CSS Transforming Time (ms)
25	Scale	141	78
25	Translate	156	63
50	Scale	297	141
50	Translate	297	110
100	Scale	609	328
100	Translate	563	250
200	Scale	1484	657
200	Translate	1235	656

The results get closer the more shapes you have. I would include higher test results but it was just too slow in both cases! Hope that's as interesting as I found it..!
If you want to see for yourself try out the demo here : http://svn.tiddlywiki.org/Trunk/contributors/JonRobson/plugins/WorldMaps/canvastest.html or an online link here (note this is made for Internet Explorer so css transformations will not work in Firefox).