未捕獲的TypeError：無法讀取null的屬性'getContext'

Question

這是我的HTML代碼，顯示了畫布：

 <canvas id="backgroundCanvas" width="550" height=600"></canvas>
 <canvas id="playerCanvas" width="550" height=600"></canvas
 <canvas id="enemiesCanvas" width="550" height=600"></canvas>

據說是在這里發生問題的地方：

game.contextBackground = document.getElementById("backgroundCanvas").getContext("2d"); // line 32
game.contextPlayer = document.getElementById("playerCanvas").getContext("2d"); // line 33
game.contextEnemies = document.getElementById("enemiesCanvas").getContext("2d"); // line 34

該錯誤在第34行顯示：

未捕獲的TypeError：無法讀取null的屬性'getContext'

任何幫助深表感謝 ：）

Answer 1

HTML加載完成之前，您的JavaScript似乎正在運行。 如果可以使用jQuery，則將js放在其中；

$( document ).ready(function() {
  // js goes in here.
});

Answer 2

因為尚未正確關閉playerCanvas的畫布標記， playerCanvas ：

<canvas id="backgroundCanvas" width="550" height=600"></canvas>
<canvas id="playerCanvas" width="550" height=600"></canvas>
<canvas id="enemiesCanvas" width="550" height=600"></canvas>