Create multiple objects on canvas

Question

My code creates a single circle which falls to the bottom of the canvas and bounces. The problem is that I need to create multiple of these circles. How do I do that?

var canvas = document.getElementById('mcanvas');
var raf;


function rainDrop() {
  this.x = Math.random() * (canvas.width - (canvas.width - canvas.width)) + (canvas.width - canvas.width);
  this.y = 0;
  this.vx = -0.5;
  this.vy = 1;
  this.radius = 1;
  this.color = 'blue';
  this.gravity = 2;
  this.gravitySpeed = 0;
  this.bounce = 1;
  this.ctx = canvas.getContext('2d');
  this.draw = function() {
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fillStyle = this.color;
    this.ctx.fill();
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.vx;
    this.y += this.vy + this.gravitySpeed;
    this.hitBottom();
  }
  this.hitBottom = function() {
    var rockbottom = canvas.height - this.radius;
    if (this.y > rockbottom) {
      this.y = rockbottom;
      this.gravitySpeed = -(this.gravitySpeed / 1.5 * this.bounce);
    }
  }
}



var ball = new rainDrop();


function drawf() {
  ball.ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  ball.newPos();
  raf = window.requestAnimationFrame(drawf);
}

canvas.addEventListener('mouseover', function(e) {
  raf = window.requestAnimationFrame(drawf);
});

ball.draw();

<canvas id="mcanvas" width="200" height="100"></canvas>

The code currently: draws a single circle at a random location on the top of the canvas and then the circle will descend towards the bottom of the canvas. I want the code to: draw many of these circles without me having to code hundreds of lines of variables.

Answer 1

There might be a better way to do this but I've used an array of balls and added a forEach.

Populate a new array of balls with 150 balls

var balls = [];

for(var i=0; i<150; i++)
{
    balls[i] = new rainDrop();
}

In the drawf function loop the balls to draw them

function drawf() {
    balls[0].ctx.clearRect(0,0, canvas.width, canvas.height);
    balls.forEach(function(b) {
        b.draw();
        b.newPos();});
        raf = window.requestAnimationFrame(drawf);
}

I've also randomised the Y starting position of the balls as I think this is what you're looking for.

 this.y = Math.random() * (canvas.height - (canvas.height-canvas.height)) + (canvas.height-canvas.height);

var canvas = document.getElementById('mcanvas');
var raf;


function rainDrop() {
  this.x = Math.random() * (canvas.width - (canvas.width-canvas.width)) + (canvas.width-canvas.width);
  this.y = Math.random() * (canvas.height - (canvas.height-canvas.height)) + (canvas.height-canvas.height);
  this.vx = -0.5;
  this.vy = 1;
  this.radius = 1;
  this.color = 'blue';
  this.gravity = 2;
  this.gravitySpeed = 0;
  this.bounce = 1;
  this.ctx = canvas.getContext('2d');
  this.draw = function() {
    this.ctx.beginPath();
    this.ctx.arc(this.x,this.y,this.radius,0,Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fillStyle = this.color;
    this.ctx.fill();
  }
  this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.vx;
        this.y += this.vy + this.gravitySpeed;
        this.hitBottom();
    }
  this.hitBottom = function() {
    var rockbottom = canvas.height - this.radius;
    if (this.y > rockbottom) {
      this.y = rockbottom;
      this.gravitySpeed = -(this.gravitySpeed/1.5 * this.bounce);
    }
  }
}


var balls = [];

for(var i=0; i<150; i++)
{
	balls[i] = new rainDrop();
}


function drawf() {
  balls[0].ctx.clearRect(0,0, canvas.width, canvas.height);
  balls.forEach(function(b) {
        b.draw();
        b.newPos();});

  raf = window.requestAnimationFrame(drawf);
}

canvas.addEventListener('mouseover', function(e) {
  raf = window.requestAnimationFrame(drawf);
});

<canvas id="mcanvas" style="border:1px solid gray; width:200px; height:100px;"/>