HTML5 (Javascript included) Game, canvas setup error [duplicate]

Question

I have set up a canvas in HTML5 exactly right (I think) I've got an error:

I've previously made a canvas game, and I have copied and pasted the code multiple times, It looks right to me, I've googled the HTML canvas set up, I have got the same answer, please help!

<html>
<head>
</head>
<body>
    <script src="jumpMan.js"></script>
    <canvas width="1000px" height="450px" id="canvas"></canvas>

</body>
</html>

//jumpMan.js
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.fillRect(50,50,50,50);

My Error:

Uncaught TypeError: Cannot read property 'getContext' of null at jumpMan.js:3 (anonymous) @ jumpMan.js:3

You can try to put script tag under canvas, because the canvas tag has not been rendered yet. — Clark
– Clark, Commented Jun 17, 2019 at 3:57
var canvas = document.getElementById("canvas"), try replacing with a semicolon var canvas = document.getElementById("canvas"); — Moshe Sommers
– Moshe Sommers, Commented Jun 17, 2019 at 3:57

Nick Parsons · Accepted Answer · 2019-06-17 04:33:19Z

1

Your problem is that your content isn't rendered yet.

So you have to check if your content/document is rendered before accessing the DOM.

Try this:

document.addEventListener('DOMContentLoaded', fn, false) ;
function fn() { //get canvas access...}

edited Jun 17, 2019 at 4:33

Nick Parsons

51.7k6 gold badges62 silver badges80 bronze badges

answered Jun 17, 2019 at 4:15

Sv3n

3472 gold badges6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oli.W · Accepted Answer · 2019-06-19 04:51:29Z

0

I've recently found out something else that also works: If you move the tags under the tag, it will work.

<canvas width="1000px" height="450px" id="canvas" ></canvas>
<script src='jumpMan.js'></script>

answered Jun 19, 2019 at 4:51

Oli.W

31 bronze badge

Collectives™ on Stack Overflow

HTML5 (Javascript included) Game, canvas setup error [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related