Problem with : "Uncaught TypeError: Cannot read property 'getContext' of null" when trying to code with Javascript. Further information below
Question
var canvas = document.querySelector("myCanvas"); var ctx = canvas.getContext("2d"); window.addEventListener("keydown", moveSomething, false); var dx = 0; var dy = 0; function moveSomething(e) { switch(e.keycode) { case 37: //left key dx -= 2; break; case 38: //up key dy += 2; break; case 39: //right key dx += 2; break; case 40: //down key dy -= 2; break; } drawRect(); } function drawRect() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.rect(250 + dx, 200 + dy , 25, 25); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); }
* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>basic game</title> </head> <body> <canvas id="myCanvas" height="500px" width="500px"></canvas> </body> </html>
I'm trying to code a simple program where you can move a rectangle around a canvas using the keys.
For some reason when I load it I get the following error: "Uncaught TypeError: Cannot read property 'getContext' of null"
This is confusing me as I have coded another game with this but I didn't get this error.
Also, I have tried to use the "window.onload=function(){}" solution but that didn't seem to help.
Any advice and help would be greatly appreciated, Thank You.
2 answers
solution1
0 2019-12-25 00:59:40
The issue is here document.querySelector("myCanvas") . querySelector takes css selectors and myCanvas is id for the canvas.
It needs to be: document.querySelector("#myCanvas")
var canvas = document.querySelector("#myCanvas"); var ctx = canvas.getContext("2d"); window.addEventListener("keydown", moveSomething, false); var dx = 0; var dy = 0; function moveSomething(e) { switch(e.keycode) { case 37: //left key dx -= 2; break; case 38: //up key dy += 2; break; case 39: //right key dx += 2; break; case 40: //down key dy -= 2; break; } drawRect(); } function drawRect() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.rect(250 + dx, 200 + dy , 25, 25); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); }
* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>basic game</title> </head> <body> <canvas id="myCanvas" height="500px" width="500px"></canvas> </body> </html>
solution2
0 2019-12-25 01:00:43
You're calling document.querySelector , but you're passing it a raw ID instead of a CSS selector. To fix it, use document.getElementById instead:
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); window.addEventListener("keydown", moveSomething, false); var dx = 0; var dy = 0; function moveSomething(e) { switch(e.keycode) { case 37: //left key dx -= 2; break; case 38: //up key dy += 2; break; case 39: //right key dx += 2; break; case 40: //down key dy -= 2; break; } drawRect(); } function drawRect() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.rect(250 + dx, 200 + dy , 25, 25); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); }
* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>basic game</title> </head> <body> <canvas id="myCanvas" height="500px" width="500px"></canvas> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.