How can I use the HTML5 canvas element in IE?

Question

I am trying to use the HTML5 canvas element to draw some arcs and circles - this works perfectly in FF but IE8 does not seem to support it.

Now, there exist Javascript libraries which seem to make IE8 work well with Canvas. An example can be found here:

http://thejit.org/Jit/Examples/Hypertree/example1.html

I have read their entire source but I cannot understand how they are making Canvas work with IE8. Can somebody please throw some light on the method used?

Answer 1

The page is using excanvas - a JS library that simulates the canvas element using IE's VML renderer.

Answer 2

I do recommend programming to a higher level of abstraction than "whatever JS and DOM feature happens to be natively supported on this random browser"!-) My favorite framework for this "browser independence" task in general is dojo -- so, for graphics in particular, I'd recommend dojo.gfx -- if you're rather a fan of jQuery or whatever, I imagine those other frameworks offer similarly powerful and smooth facilities (or else, why hasn't everybody else switched to Dojo already?-).

Answer 3

You could use the newly released Chrome Frame plugin for IE, but it requires that the HTML 5 website includes the special meta tag that enables the plugin.

http://code.google.com/chrome/chromeframe/

Answer 4

Just for info.:

I've tried excanvas on IE8, but IE8's performance through excanvas is miserable. + lot's of anomalies with drawing.

My .js with canvas-drawing-routines works perfectly on every other browser (Opera, Safari, Firefox, Chrome).

Answer 5

Currently, ExplorerCanvas is the only option to emulate HTML5 canvas for IE6, 7, and 8. You're also right about its performance, which is pretty poor.

I found a particle simulatior that benchmarks the difference between true HTML5 canvas handling in Google Chrome, Safari, and Firefox, vs ExplorerCanvas in IE. The results show that the major browsers that do support the canvas tag run about 20 to 30 times faster than the emulated HTML5 in IE with ExplorerCanvas.

I doubt that anyone will go through the effort of creating an alternative because 1) excanvas.js is about as cleanly coded as it gets and 2) when IE9 is released all of the major browsers will finally support the canvas object. Hopefully, We'll get IE9 within a year

Eric @ www.webkrunk.com