getContext is not a function
I got the same error because I had accidentally used <div>
instead of <canvas>
as the element on which I attempt to call getContext
.
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.