Uncaught TypeError: Cannot read property 'getContext' of null

Question

This is my HTML code, showing the canvas:

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

This is where the problem is said to occur:

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

the error occurs on line 34 where it says:

Uncaught TypeError: Cannot read property 'getContext' of null

any help is much appreciated :)

You have a `typo` on the middle canvas: ` – Hackerman Jun 25 '14 at 20:14 — Hackerman, Jun 25 '14 at 20:14

score 6 · Answer 1 · answered Jun 25 '14 at 20:17

6

It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;

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

answered Jun 25 '14 at 20:17

lhoworko

1,191
2
13
24

i didn't have the typo as above and was getting this error. your answer resolved it for me. thanks. – jakeatwork Aug 24 '15 at 19:48

score 3 · Accepted Answer · answered Jun 25 '14 at 20:13

Because you have not closed the canvas mark correctly for 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>

Uncaught TypeError: Cannot read property 'getContext' of null

2 Answers2

Linked