Uncaught TypeError: Cannot read property 'getContext' of null

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

This is my html code:

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vector_5</title>
        <script src="Test_Particle.js"></script>  
    </head>

    <body>
        <canvas id="myCanvas" ></canvas>
    </body>
    
</html>

Solution

The canvas doesn't exist yet. Load the script after the canvas element.

Source: elclanr's comment Sep 13 '14 at 22:43