不明白为什么我会收到未定义的错误

Question

My code is basically up on jsFiddle: http://jsfiddle.net/9jekdhn1/ . I am playing around with canvas and animation.

My problem is that i am getting an Uncaught TypeError: Cannot read property 'x' of undefined canvas2.js:39.

I am not seeing why i would get this error and it acts like it does see the value for x when running the script. If someone could tell me why i am getting this error and how to fix it that would be great. My script:

    var canvas = document.getElementById('canvasTwo');
     canvas.width = 1000;
     canvas.height = 500;
  var circ = [];
  var c = canvas.getContext('2d');
  var cW = c.canvas.width, cH = c.canvas.height;
  var max = 20;

 function newCircle(){
    var x = Math.floor(Math.random() * cW) + 1;
    var y = 300;
    var r = 5;
    var cWidth = Math.floor( 5* Math.random());
    var cHeight = Math.floor( 5* Math.random());
    circ.push({"x":x,"y":y,"width":cWidth,"height":cHeight,"r":r});
}


function draw(){
    newCircle();
    for(var i=0;i<max;i++){
        c.fillStyle = 'rgba(163,219,91,0.3)';
        c.beginPath();
        c.arc(circ[i].x+=3, circ[i].y+=.5, circ[i].r,0, 2* Math.PI, false);
        c.fill();
     if(circ[i].y > cH || circ[i].x>cW){
        circ.splice(i,1);
     }
   }
 };
 function animate(){
    c.save();
    c.clearRect(0, 0, cW, cH);
    draw();
    c.restore();
 }

 setInterval(animate, 30);

Answer 1

You are iterating to max , however initially there are not max (20) numbers of items in circ . Change to:

for(var i=0;i<circ.length;i++)

http://jsfiddle.net/9jekdhn1/1/

Answer 2

The error pretty much tells you what the problem is, you have this

circ[i].x

and it's telling you that there is no x property, so the object doesn't have such a property.
Either you iterated over the wrong numbers, so i doesn't reference anything in the array, or you simply didn't add a x property.

In this case, it's the former, and it's because you have an empty array

var circ = [];

then you start pushing to that array

circ.push({"x":x,"y":y,"width":cWidth,"height":cHeight,"r":r});

so the array starts at 0, and the first time you run the loop it only has one object inside it, and yet you've set max to 20 so you're iterating to 20, but there's only one single object at the zero index ?

If you want to limit to max 20, add a condition that uses the length if it's below the max value, like this

var val = circ.length < max ? circ.length-1 : max;

for(var i=0;i<val;i++){ ...

FIDDLE