Game Repo: 18.2 - cannot read property of null, reading getContext. | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

Game Repo: 18.2 - cannot read property of null, reading getContext.

I entered the code exactly as it has it laid out for us in the example and I'm getting an error when I define context. window.onload = function() { let btn = document.getElementById("jump"); let count = 0; btn.onclick = function () { count += 1; }; }; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); <--- ERROR var x = "300"; var y = "350"; context.arc(x, y, 50, 0, 2 * Math.PI); context.fillStyle="red"; context.fill();

13th Mar 2022, 2:00 AM
Devon Silverfox-Patchett
Devon Silverfox-Patchett - avatar
4 Answers
0
The Error Sounds Like there ist no element with ID "canvas" or the Element is Not a canvas element. Have you checked that? What does console.log(canvas) Print Out? Is it a canvas object?
13th Mar 2022, 2:15 AM
MrGrumpy
MrGrumpy - avatar
0
<h1 align="center">My Jumper Game</h1> <p align="center">A fun flappy-bird like game.</p> <canvas id="canvas" height="600" width="400"> Your browser does not support HTML5 canvas tag. </canvas><br/><br/> <button id="jump">Jump</button>
13th Mar 2022, 2:15 AM
Devon Silverfox-Patchett
Devon Silverfox-Patchett - avatar
0
Thanks for your help, I didn't have it inside my window.onload. for my web dev program we actually didn't use window.onload very often.
13th Mar 2022, 2:47 AM
Devon Silverfox-Patchett
Devon Silverfox-Patchett - avatar
- 1
The error is coming because your javascript code is executing before the upload of your html page. So the canvas will have null value. Because of late upload of your html, your canvas element was not created. Put your js (everything) inside your window.onload = function() { // Entire js code }
13th Mar 2022, 3:54 AM
NonStop CODING
NonStop CODING - avatar