Cannot read property getContext of null using canvas

Question

I get the error Uncaught TypeError  Cannot read property  getContext  of null and the important parts in files are    I am wondering since game js is in a directory below  it cannot find canvas  What should I do     index html    lt canvas id  canvas  width  640  height  480  gt  lt  canvas gt      javascript game js   var Grid   function width  height                        this draw   function             var canvas   document getElementById  canvas            if canvas getContext                var context   canvas getContext  2d                for var i   0  i  lt  width  i                      for var j   0  j  lt  height  j                          if isLive i  j                             context fillStyle    lightblue                                             else                           context fillStyle    yellowgreen                                             context fillRect i 15  j 15  14  14

User · Answer

Write code in this manner       lt canvas id  canvas  width  640  height  480  gt  lt  canvas gt   lt script gt  var Grid   function width  height                this draw   function         var canvas   document getElementById  canvas        if canvas getContext            var context   canvas getContext  2d            for var i   0  i  lt  width  i                  for var j   0  j  lt  height  j                      if isLive i  j                         context fillStyle    lightblue                                     else                       context fillStyle    yellowgreen                                     context fillRect i 15  j 15  14  14                                                          First write canvas tag and then write script tag  And write script tag in body

User · Answer

You just need to put lt script src    javascript game js  gt  lt  script gt  after your  lt canvas gt   Because the browser don t find your javascript file before the canvas

User · Answer

You should put javascript tag in your html file  because browser load your webpage according to html flow  you should put your javascript file lt script src  javascript game js  gt   after the  lt canvas gt element tag  otherwise if you put your javascript in the header of html Browser load script first but it doesn t find the canvas  So your canvas doesn t work

User · Answer

Put your JavaScript code after your tag  lt canvas gt  lt  canvas gt

User · Answer

I guess the problem is your js runs before the html is loaded   If you are using jquery  you can use the document ready function to wrap your code     function         var Grid   function width  height               codes                Or simply put your js after the  lt canvas gt

User · Answer

You don t have to include JQuery   In the index html   lt canvas id  canvas  width  640  height  480  gt  lt  canvas gt  lt script src  javascript game js  gt  This should work without JQuery     Edit  You should put the script tag IN the body tag

User · Answer

This might seem like overkill  but if in another case you were trying to load a canvas from js  like I am doing   you could use a setInterval function and an if statement to constantly check if the canvas has loaded     set up the interval var thisInterval   setInterval function      this if statment checks if the id  thisCanvas  is linked to something   if document getElementById  thisCanvas      null         do what you want         clearInterval   will remove the interval if you have given your interval a name      clearInterval thisInterval        the 500 means that you will loop through this every 500 milliseconds  1 2 a second    500     In this example the canvas I am trying to load has an id of  thisCanvas

User · Answer

I assume you have your JS file declared inside the  lt head gt  tag so it keeps it consistent  like standard  then in your JS make sure the canvas initialization is after the page is loaded   window onload   function          var myCanvas   document getElementById  canvas        var ctx   myCanvas getContext  2d        There is no need to use jQuery just to initialize a canvas  it s very evident most of the programmers all around the world use it unnecessarily and the accepted answer is a probe of that

[javascript] Cannot read property 'getContext' of null, using canvas

Examples related to javascript

Examples related to html

Examples related to canvas