title: How to make multiple balls drop on click?
body: <p>I have a ball that drops from cursor location, and redrops when the cursor is moved to another location. I am trying get a new ball to drop every time I click the mouse. I tried: </p>
  
  <pre><code>canvas.addEventListener('click', function(event) {
    ball.draw();
  });
  </code></pre>
  
  <p>But it doesn't seem to do anything. Is there some way to draw a NEW ball on click instead of just redrawing the same ball over and over again?</p>
  
  <p>Here's the rest of the code:</p>
  
  <pre><code>var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d");
  var W = window.innerWidth,
      H = window.innerHeight;
  var running = false;
  
  canvas.height = H; canvas.width = W;
  
  var ball = {},
      gravity = .5,
      bounceFactor = .7;
  
  ball = {
    x: W,
    y: H,
    radius: 15,
    color: "BLUE",
    vx: 0,
    vy: 1,
  
    draw: function() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
    }
  };
  
  function clearCanvas() {
    ctx.clearRect(0, 0, W, H);
  }
  
  function update() {
    clearCanvas();
    ball.draw();
  
    ball.y += ball.vy;
  
    ball.vy += gravity;
    if(ball.y + ball.radius &gt; H) {
      ball.y = H - ball.radius;
      ball.vy *= -bounceFactor;
    }
  }
  
  canvas.addEventListener("mousemove", function(e){
    ball.x = e.clientX;
    ball.y = e.clientY;
    ball.draw();
  });
  setInterval(update, 1000/60);
  
  ball.draw();
  </code></pre>