Why do I get an error. Can't read value of null on getContext?

Question

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();

Answer 1

Your script loaded before the document is ready.

Just wrap your whole Javascript code in -
window.onload = () => {

...

}

Answer 2

Perhaps this post can help understanding

https://www.sololearn.com/post/90825/?ref=app