Прыгающие мячи с помощью canvas

var Ball = function() { 
  this.x = Math.floor(Math.random() * 400); 
  this.y = Math.floor(Math.random() * 400); 
  this.xSpeed = -2; 
  this.ySpeed = 3; 
}; 
 
 
var circle = function(x, y, radius, fillCircle) { 
  ctx.beginPath(); 
  ctx.arc(x, y, radius, 0, Math.PI * 2, false); 
  if (fillCircle) { 
    ctx.fill(); 
  } else { 
    ctx.stroke(); 
  } 
}; 
 
Ball.prototype.draw = function() { 
  circle(this.x, this.y, 3, true); 
}; 
 
Ball.prototype.move = function() { 
  this.x += this.xSpeed; 
  this.y += this.ySpeed; 
}; 
 
Ball.prototype.checkCollision = function() { 
  if (this.x < 0 || this.x > width) { 
    this.xSpeed = -this.xSpeed; 
  } 
  if (this.y < 0 || this.y > height) { 
    this.ySpeed = -this.ySpeed; 
  } 
}; 
 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
 
 
var ball = new Ball(); 
var ball2 = new Ball(); 
var ball3 = new Ball(); 
var width = canvas.width; 
var height = canvas.height; 
 
 
/* 
for(var i = 0; i < 1; i++){ 
    var ball = new Ball() 
 
    setInterval(function () { 
    ctx.clearRect(0, 0, width, height); 
    ball.draw(); 
    ball.move(); 
    ball.checkCollision(); 
 
    ctx.strokeRect(0, 0, width, height); 
}, 30); 
 
} 
*/ 
 
setInterval(function() { 
  ctx.clearRect(0, 0, width, height); 
  ball.draw(); 
  ball.move(); 
  ball.checkCollision(); 
 
  ball2.draw(); 
  ball2.move(); 
  ball2.checkCollision(); 
 
  ball3.draw(); 
  ball3.move(); 
  ball3.checkCollision(); 
 
  ctx.strokeRect(0, 0, width, height); 
}, 30);

<canvas id="canvas" width="400" height="400"></canvas>