Несколько прыгающих шариков на холсте - Javascript

Question

Как вы можете добавить несколько шаров к этому коду?

В идеале я хотел бы послать в функцию X количество шаров для отображения на холсте.

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var p = { x: 25, y: 25 };
var velo = 3,
  corner = 50,
  rad = 20;
var ball = { x: p.x, y: p.y };
var moveX = Math.cos((Math.PI / 180) * corner) * velo;
var moveY = Math.sin((Math.PI / 180) * corner) * velo;

function DrawMe() {
  ctx.clearRect(0, 0, 400, 300);

  if (ball.x > canvas.width - rad || ball.x < rad) moveX = -moveX;
  if (ball.y > canvas.height - rad || ball.y < rad) moveY = -moveY;

  ball.x += moveX;
  ball.y += moveY;

  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.arc(ball.x, ball.y, rad, 0, Math.PI * 2, false);
  ctx.fill();
  ctx.closePath();
}

setInterval(DrawMe, 10);

Answer 1

Вы могли бы иметь функцию DrawMe, принимающую «ball» в качестве параметра, и вместо того, чтобы просто иметь 1 ball, вы могли бы иметь массив шариков, и на каждом тике вызова «setInterval» вы могли быобновите все шары, просматривая массив и вызывая DrawMe для каждого шара. Только в одну сторону:)