How can I use HTML5 canvas element in IE?

Question

I'm trying to use the HTML5 canvas element to draw some arcs and circles - this works fine in FF, but IE8 doesn't seem to support it.

Now there are Javascript libraries that seem to make IE8 work well with Canvas. An example can be found here .

I read all their source, but I can’t understand how they make Canvas work with IE8. Can someone please shed light on the method used?

Answer 1

The page uses excanvas , a JS library that mimics a canvas element using IE VML rendering.

Please note that in Internet Explorer 9, the canvas tag is supported natively ! See MSDN docs for more information.

Answer 2

You can try fxCanvas: https://code.google.com/p/fxcanvas/

It implements almost the entire Canvas API in flash mode.

Answer 3

You can use the recently released Chrome Frame plugin for IE, but it requires the HTML 5 website to include a special meta tag that the plugin allows.

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

Chrome Frame seems to be using Explore Canvas (excanvas.js).

Answer 4

ExplorerCanvas is currently the only option for emulating an HTML5 canvas for IE6, 7, and 8. You are also right in your performance, which is pretty bad.

I found a simulatior element that compares the difference between true HTML5 canvas processing in Google Chrome, Safari and Firefox, as well as ExplorerCanvas in IE. The results show that the main browsers that support the canvas tag are about 20-30 times faster than emulated HTML5 in IE using ExplorerCanvas.

I doubt anyone will try to create an alternative, because 1) excanvas.js is about as coded as it is, and 2) when IE9 is released, all major browsers will finally support the canvas object. Hope we get IE9 in a year

Eric @ www.webkrunk.com

Answer 5

If you need to use IE8, you can try this JavaScript library for vector graphics. This is similar to resolving IE8 "incompatibility" and "SVG" incompatibilities at the same time.

Raphaël

I just tried it with a quick example and it works correctly. I don’t know how readable the source code is, but I hope it helps you. As they said on their website, the library is compatible with very old researchers.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, and Internet Explorer 6.0+.

Answer 6

I just used flashcanvas and I got this working. If you run into problems, just be sure to read the reservations and much more. In particular, if you create canvas elements dynamically, you need to explicitly initialize them:

if (typeof FlashCanvas != "undefined") { FlashCanvas.initElement(canvas); }