Error canvas.getContext('2d');

Question

Im writing a code for a game and when creating a canvas for 2d theres this error:
Uncaught TypeError: Cannot read property 'getContext' of null
Line: 4

I think the problem is here.
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

Any thoughts?

Answer 1

This is an issue with how SoloLearn includes the JS script, which was discussed before, and can be fixed with either window.onload or by declaring the script at the bottom of the HTML file.

https://www.sololearn.com/Discuss/1397493/code-works-on-my-computer-but-won-t-run-on-the-sololearn-ide
https://www.sololearn.com/Discuss/1260302/help-needed-javascript-onload-and-code-readability

Answer 2

https://code.sololearn.com/W8SYbJ6PjUtP/?ref=app

Answer 3

Hornetfly I have tried making a similar program both in sololearn editor and notepad ++ and while the notepad version worked perfectly in browser, the sololearn version had an error. Isn't that cool?

Answer 4

Hoàng Nguyễn Văn Thanks :)
I've fixed it, check out please.

Answer 5

It's all right, so the error is in the html.

Do you have an <canvas> tag in you html file with the id="canvas" attribute?
like <canvas id="canvas"></canvas>
If not, pls correct it

EDIT: You can also do
const context=document.getElementsByTagName("canvas")[0].getContext("2d");
so if you don't want to use the id attribute.

Answer 6

There is a canvas tag in the html
I have tried launching it from my phone and now the error comes at another line, trying to figure out
On PC it's alerting about the context which is really weird

Answer 7

I changed that line with the one you suggested and know the error says "of undefined" instead of "of null"

Answer 8

hmmm 🤔
Can you post a link/refference to your complete code?

Answer 9

https://code.sololearn.com/WcgDkP0Kz6PM/?ref=app

Answer 10

what src should I write to the script in html?