Reputation: 2123

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());
}

Upvotes: 73

Answers (9)

Aditi Mahabole

Reputation: 1

This is a Vanilla problem so to solve this just write.

this.element = document.getElementById('whatever canvas id');
this.context = this.element.getContext("2d");

And every time use this.context.drawImage() I mean whatever functions you are using. Use it using this.context instead of variable ...because its giving error in mine. So if you are using pure javascript,html file then do the above.

Example:

this.context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

Or:

this.context.drawImage(playerImage, frameX, frameY, spriteWidth, spriteHeight, 0, 0, spriteWidth, spriteHeight);

Like this, I hope this will help you

Upvotes: 0

sg28

Reputation: 1387

The value will be at array 0th position. So we need to do variable = $("#id") use variable[0]

Upvotes: 0

Nassergk

Reputation: 11

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.

Upvotes: 1

Werner Barnard

Reputation: 23

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.

Upvotes: 2

Alnitak

Reputation: 339816

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.

Upvotes: 86