No se puede leer la propiedad 'getContext' de null, usando canvas

Question

Recibo el error Uncaught TypeError: Cannot read property 'getContext' of null y las partes importantes de los archivos son ... Me pregunto porque game.js está en un directorio a continuación, no puede encontrar el lienzo? ¿Que debería hacer?

./index.html:

<canvas id="canvas" width="640" height="480"></canvas> 

./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 < width; i++) { 
       for(var j = 0; j < height; j++) { 
        if(isLive(i, j)) { 
         context.fillStyle = "lightblue"; 
        } 
        else { 
         context.fillStyle = "yellowgreen"; 
        } 
        context.fillRect(i*15, j*15, 14, 14); 
       } 
      } 
     } 
    } 
} 

Answer 1

Supongo que el problema es sus carreras js antes de cargar el html.

Si está utilizando jQuery, puede utilizar la función de lista de documentos para envolver su código:

$(function() { 
    var Grid = function(width, height) { 
     // codes... 
    } 
}); 

O simplemente poner sus js después de la <canvas>.

Answer 2

No tiene que incluir JQuery.

En el index.html:
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> Esto debería funcionar sin JQuery ...

Editar: Usted debe poner la etiqueta de script en el cuerpo de la etiqueta ...

Answer 3

Usted debe poner javascript etiqueta en tu archivo html porque el navegador carga su página web de acuerdo con el flujo de html, debe poner su archivo de Javascript <script src="javascript/game.js"> después de la etiqueta del elemento <canvas>. de lo contrario, si coloca su javascript en el encabezado de html.Browser cargará el script primero, pero no encontrará el lienzo. Entonces tu lienzo no funciona.

Answer 4

Escribir código de esta manera ...

<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
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 < width; i++) { 
      for(var j = 0; j < height; j++) { 
       if(isLive(i, j)) { 
        context.fillStyle = "lightblue"; 
       } 
       else { 
        context.fillStyle = "yellowgreen"; 
       } 
       context.fillRect(i*15, j*15, 14, 14); 
       } 
      } 
     } 
    } 
} 

Primera etiqueta canvas escribir y luego escribir etiqueta de script. Y escribir la etiqueta de script en el cuerpo.

Answer 5

Deja tus JavaScript después de su etiqueta "<canvas></canvas>"