Appending canvas to a div in IE8

Question

My problem is that I am trying to append an element of canvas in a container div I have tried this code and it's not working. When I try to switch my browser to IE8 it's not appending the canvas element in the .MainChart element:

$('.MainChart').append('<canvas width="500" height="500">');

I also tried this code but it seems it's not working too: it appends, but it seems the element is not working. Drawing in 2D getting the element by ID and the width and height attribute are not working too:

$('.MainChart').html('<canvas width="500" height="500"></canvas>');

Can you give me some advice for this matter?

I'm using Excanvas.js 2.0 to support canvas element in IE.

Answer 1

When you create a canvas element dynamically with exCanvas you will have to initialize it manually. When the page is loaded the first time the script can iterate over existing elements, but for dynamic created elements that are added at a later time you need to do this manually.

Try adding these lines to your code after you created the canvas and before you try to get its context:

var canvas = $('<canvas width="500" height="500"></canvas>');
$('.MainChart').append(canvas);

/// initialize
if (typeof G_vmlCanvasManager !== 'undefined')
    G_vmlCanvasManager.initElement(canvas[0]);

/// now this should work
var ctx = canvas[0].getContext('2d');

Hope this helps!