75

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.

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?

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
KJ Saxena
  • 21,452
  • 24
  • 81
  • 109

6 Answers6

95

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

Note that in Internet Explorer 9, the canvas tag is supported natively! See MSDN docs for details...

Shog9
  • 156,901
  • 35
  • 231
  • 235
8

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

It implements almost all Canvas API within flash shim.

astroanu
  • 3,901
  • 2
  • 36
  • 50
buzzilo
  • 91
  • 1
  • 2
  • 1
    This gets my vote due to the abominable performance of excanvas. The library does have a few issues, but in my real-world tests it came out ahead of flashcanvas in terms of both performance and stability. – Aaronaught Jan 16 '12 at 18:11
  • Is there a new version of this? The link is broken – Colbs Aug 13 '14 at 18:27
4

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/

Chrome Frame seems to use Explore Canvas (excanvas.js).

0xC0DEGURU
  • 1,432
  • 1
  • 18
  • 39
LondonBasedEngineer
  • 665
  • 5
  • 10
2

If you need to use IE8, you can try this JavaScript library for vector graphics. It is like solving the "canvas" and "SVG" incompatibilities of IE8 at the same time.

Raphaël

I have just try it in a fast example and it works correctly. I don't know how legible is the source code but I hope it helps you. As they said in its site, the library is compatible with very old explorers.

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

Timbergus
  • 3,167
  • 2
  • 36
  • 35
2

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

Eric Rowell
  • 29
  • 1
  • Can anyone tell me what is meant by 'slow'? Do you mean that the browser becomes unresponsive frequently, somewhat like hanging, or is it that the pages take a long time to load because each page has to load the `excanvas.js` file which is pretty heavyweight (is it?)? – SexyBeast Jan 23 '13 at 17:21
  • excanvas.js isn't too big. The issue is more about the possible maximum framerate in canvas-based animation. – nullability May 22 '13 at 19:59
0

I just used flashcanvas, and I got that working. If you encounter problems, just make sure to read the caveats and whatnot. Particularly, if you create canvas elements dynamically, you need to initialize them explicitly:

if (typeof FlashCanvas != "undefined") {
    FlashCanvas.initElement(canvas);
}
duma
  • 455
  • 1
  • 5
  • 10