jQuery dynamic canvas creation, $ctx.getContext is not a function

Question

When I try to execute this in jQuery I get $ctx.getContext is not a function in firebug.

var $ctx = $( '<canvas />', {width:'100', height:'100'} )
$widget.append($ctx)                                     
$ctx.getContext('2d')                                    

Any idea why I get this error? How do I dynamically create and initialize a canvas element?

Answer 1

$ctx is a jQuery object. use $ctx[0].getContext('2d') to get the context

Answer 2

If using excanvas you will need to use the following so it works in IE.

var canvas = $ctx[0];

if (canvas.getContext == undefined) {
    return G_vmlCanvasManager.initElement(canvas).getContext("2d"); 
}

return canvas.getContext('2d')