[解決済み] キャンバスを使用しているため、null のプロパティ 'getContext' を読み取ることができません。

質問

次のようなエラーが発生します。 Uncaught TypeError: Cannot read property 'getContext' of null で、ファイル中の重要な部分は... game.jsが下のディレクトリにあるので、canvasが見つからないのではと思うのですが？どうすればいいのでしょうか？

./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);
                }
            }
        }
    }
}

解決方法は？

htmlが読み込まれる前にjsが実行されていることが問題なのでしょう。

jqueryを使用している場合、document ready関数でコードをラップすることができます。

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

または、単純にjsを <canvas> .