getContext is not a function

Question

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   lt canvas id    id    gt unsupported browser lt  canvas gt         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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Alternatively you can use   this element   id  0

User · Answer

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  quot 2d quot       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

[javascript] getContext is not a function

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to canvas