Uncaught TypeError: Cannot read property 'getContext' of null

Question

In my console I get the error: "Uncaught TypeError: Cannot read property 'getContext' of null" and I just can't find the error I've made... or what I've done wrong. So maybe you can help me find it? Please help :)

enter code here

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var cW = canvas.width = 1000; 
var cH = canvas.height = 500; 

var particleAmount = 10; 
var particles = []; 

for(var i=0;i<particleAmount;i++) { 
particles.push(new particle());

}

function particle() { 
this.x = (Math.random() * (cW-(40*2))) + 40; 
this.y = (Math.random() * (cH-(40*2))) + 40; 
this.xv = Math.random()*20-10; 
this.yv = Math.random()*20-10; 

}

function draw () { 
ctx.fillStyle = "black";
ctx.fillRect(0,0,cW,cH);

for(var ii=0;ii<particles.length;ii++){
    var p = particles[ii]; 
    ctx.fillStyle = "red";
    ctx.beginPath(); 
    ctx.arc(p.x,p.y,40,Math.PI*2,false); 
    ctx.fill();
}


}

setInterval(draw,30);

Are you sure you're loading the script when the DOM is ready? — elclanrs, Sep 13 '14 at 22:41
Right, so the canvas doesn't exist yet. Load the script after the canvas element. — elclanrs, Sep 13 '14 at 22:43

gilbert-v · Answer 1 · 2021-02-23T13:22:49.337

6

The error basically means that the HTML and the JavaScript code aren't cooperating properly, or simply that you haven't loaded the script correctly.
Try this:

function init() {
  // Run your javascript code here
}

// Run the 'init' function when the DOM content is loaded
document.addEventListener("DOMContentLoaded", init, false);

Hope this helps.

edited Feb 23 '21 at 13:22

answered Sep 13 '14 at 23:20

gilbert-v

1,263
1
11
23

score 3 · Accepted Answer · answered May 30 '16 at 14:11

The answer is in the comments just after the question! Someone else also posted it as an answer a bit below, but all credits to: @elclanrs

"Right, so the canvas doesn't exist yet. Load the script after the canvas element. – elclanrs Sep 13 '14 at 22:43"

score 1 · Answer 3 · answered Aug 24 '15 at 10:28

1

I think you put the script tag above of the canvas tag please put it after the canvas tag.

answered Aug 24 '15 at 10:28

pixellab

588
3
12

score 0 · Answer 4 · answered May 30 '16 at 08:35

Put the scripts file after the canvas. That means put down your script before the body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas</title>

    <link rel="shortcut icon" href="assets/1.png">
    <link rel="stylesheet" href="assets/canvas.css">
</head>
<body>
    <div class="container">
        <h2>Canvas</h2>
        <canvas id="myCanvas" width="400" height="300">

        </canvas> <!-- End Canvas -->
    </div> <!-- End Container -->
    <script src="canvas.js"></script>
</body>
</html>

score -1 · Answer 5 · answered Nov 18 '15 at 16:59

-1

Try to declare the canvas element before the script tag. It worked fine for me.

answered Nov 18 '15 at 16:59

pradeep parvathaneni

1
3

Uncaught TypeError: Cannot read property 'getContext' of null

5 Answers5