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.
This question is related to
javascript
jquery
html
canvas
I recently got this error because the typo, I write 'canavas' instead of 'canvas', hope this could help someone who is searching for this.
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 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];
Source: Stackoverflow.com