Question

I want to be able to draw an array of balls, I can push the balls into the array (when clicking the canvas).

I can draw 1 of the balls on the canvas if I create it with ball = new Ball, but as soon as I try to draw from inside the array it breaks.

I draw inside a for loop with balls[i].draw

Here’s a jsFiddle.

And here’s the relevant code:

function init(){
defaultBall();
    for(i=0;i<balls.length;i++){
        balls[i].draw;
    }
    ball.draw();
}

function Ball(X, Y, Radius, Color){
    this.X = X || 0;
    this.Y = Y || 0;
    this.radius = 5;
    this.color = Color;
}
Ball.prototype.draw = function(){
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.X, this.Y, this.radius, 10, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

var balls = [];

function defaultBall(){
    addBall(new Ball(50, 50, 5, '#6B7E00'));
    addBall(new Ball(150, 50, 5, '#6B7E00'));
}

function addBall(ball){
    balls.push(ball);
}
var ball = new Ball(50, 50, 5, '#6B7E00');

How should I formulate the loop to be able to draw the balls?

Help appriciated.

Answer 1

Maybe

balls[i].draw;

should be

balls[i].draw();

on line 4