Your value:
this.element = $(id);
is a jQuery object, not a pure Canvas element.
To turn it back so you can call getContext()
, call this.element.get(0)
, or better yet store the real element and not the jQuery object:
function canvasLayer(location, id) { this.width = $(window).width(); this.height = $(window).height(); this.element = document.createElement('canvas'); $(this.element) .attr('id', id) .text('unsupported browser') .attr('width', this.width) // for pixels .attr('height', this.height) .width(this.width) // for CSS scaling .height(this.height) .appendTo(location); this.context = this.element.getContext("2d"); }
See running code at http://jsfiddle.net/alnitak/zbaMh/, ideally using the Chrome Javascript Console so you can see the resulting object in the debug output.