[Solved] 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.context = this.element.getContext("2d"); //this is the line that throws the error
    this.width=$(window).width(); //change the canvas size
    $(id).width($(window).width()); //change the canvas tag size to maintain proper scale

Thanks in advance.

Enquirer: devnill


Solution #1:

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

       .attr('id', id)
       .text('unsupported browser')
       .attr('width', this.width)       // for pixels
       .attr('height', this.height)
       .width(this.width)               // for CSS scaling

    this.context = this.element.getContext("2d");

See running code at, ideally using the Chrome Javascript Console so you can see the resulting object in the debug output.

Respondent: Alnitak

Solution #2:

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

Respondent: jbasko

Solution #3:

Alternatively you can use:

Respondent: UpTheCreek

Solution #4:

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


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


Solution #5:

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

Respondent: ZHAO Xudong

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy