getContext is not a function

I'm working on making a basic web application using canvas that dynamically changes the canvas size when the window resizes. I've gotten it to work statically without any flaws but when I create an object to make it dynamically it throws an error

in chrome the error is: > Uncaught TypeError: Object [object Object] has no method 'getContext'

and in firefox it is: >this.element.getContext is not a function

I've searched the web and it seems like a common problem but none of the fixes mentioned make any difference.

The code is in question is as follows:

layer['background'] = new canvasLayer("body","background");
function canvasLayer(location,id){
    $(location).append("<canvas id='"+id+"'>unsupported browser</canvas>");
    this.element=$(id);
    this.context = this.element.getContext("2d"); //this is the line that throws the error
    this.width=$(window).width(); //change the canvas size
    this.height=$(window).height();
    $(id).width($(window).width()); //change the canvas tag size to maintain proper scale
    $(id).height($(window).height());
}

Thanks in advance.

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.

I got the same error because I had accidentally used <div> instead of <canvas> as the element on which I attempt to call getContext.

Alternatively you can use:

this.element=$(id)[0];

Actually we get this error also when we create canvas in javascript as below.

document.createElement('canvas');

Here point to be noted we have to provide argument name correctly as 'canvas' not anything else.

Thanks

I recently got this error because the typo, I write 'canavas' instead of 'canvas', hope this could help someone who is searching for this.

This might seem obvious, but you might think you have everything correct, eg: canvas element with an id, but in my case, I had a div element with the same id as well, which caused my error.

This error happens when the element you asked to run getContext function for isn't true defined canvas or isn't canvas at all so you must check your element.