title: Clearing canvas save animations already running
body: <p>I am trying to learn 2d canvas animations but cannot figure out how to keep animations already created running.</p>
  
  <p>For example: on click i create a circle that runs to the top left of the screen, but when I click again that animation is cleared and a new one starts. I want more than one circle running at a time.</p>
  
  <p>code:</p>
  
  <pre><code>window.requestAnimFrame=(function(callback){
      return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){
          window.setTimeout(callback,1000/60);
      };
  })();
  
  var can = $('canvas')[0],
      ctx = can.getContext('2d'),
      width = window.innerWidth,
      height = window.innerHeight-5,
      color = '';
  
  can.width = width;
  can.height = height;
  can.addEventListener('click',randomColor);
  can.addEventListener('click',animate);
  
  var circle = {
      x:0,
      y:0,
      r:5,
      d:2*Math.PI,
      color:''
  }
  
  function drawCircle(){
      ctx.beginPath();
      ctx.arc(circle.x,circle.y,circle.r,0,circle.d,false);
      ctx.fillStyle = circle.color;
      ctx.fill();
  }
  
  function randomColor(){
      color = 'rgba('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+',1)';
  }
  
  function clear(){
      ctx.clearRect(0,0,can.width,can.height);
  }
  
  function animate(event,startTime){
      if(startTime==undefined){
          startTime = (new Date()).getTime();
      }
      circle.x = event.clientX;
      circle.y = event.clientY;
      circle.color = color;
      var time = (new Date()).getTime()-startTime;
      var speed = (300*time/1000);
      circle.x += speed;
      circle.y -= speed;
      if (circle.x+circle.r&gt;width||circle.y&lt;0||circle.y&gt;height||circle.x&lt;0) {
          return;
      }
      clear();
      drawCircle();
      requestAnimFrame(function(){
          animate(event,startTime);
      });
  }
  </code></pre>