Trying to implement excanvas but getting errors

Question

I'm trying to implement excanvas so that my script works in IE as well as standards compliant browsers. I'm including jquery, excanvas then my script. I'm creating the canvas element like so:

data.canvas = $(document.createElement('canvas')).attr('width', data.fontwidth * 80 + 'px').attr('height', data.fontheight * 25 + 'px');
$this.append(data.canvas);

But when I try ctx = data.canvas[0].getContext('2d'); I'm getting an Object doesn't support this property or method' error on that line. Additionally I'm getting anInvalid argument` error on line 160 inside excanvas.js.

My full code is here. The working (in everything except IE) page is here. The version of excanvas I'm using is here.

update solved the 2nd error. i had to append the element before calling the init function.

Answer 1

From the docs:

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');