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

Question

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();

Answer 1

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?

Answer 2

<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>

Answer 3

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.

Answer 4

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

}