Question

I’m trying to draw on some canvas elements and, of course, I need it working In Internet Explorer. So I did some searching and used explorercanvas to get that functionality. But I’ve discovered that, for some reason, IE is unhappy with canvas elements that are added after the initial page load.

The example below has two canvas elements, one that’s present in the HTML for the page and another that is added on DOM ready. The script that draws on the canvas only works on the element that was present before the script ran.

Linky

I tried using the IE debugger to find out what was going on and I see that, for the HTML canvas, $(this)[0] returns a DispHTMLGenericElement, but the runtime canvas returns a DispHTMLUnknownElement. I’ve also tried it with document.getElementByID() and the same thing happens. Is this just another oddity in how IE deals with canvas elements? Is there a way around it?

Answer 1

From the “instructions” file for Explorer Canvas:

If you have created your canvas element dynamically it will not have the getContext method added to the element. To get it working you need to call initElement on the G_vmlCanvasManager object.

     var el = document.createElement('canvas');
     G_vmlCanvasManager.initElement(el);
     var ctx = el.getContext('2d');

Thats it. Now you can use the HTML5 spec for Canvas as your reference.