title: Javascript animation of arc() length
body: <p>I know that this question may have already been answered, but I am having a hard time figuring out how to do it with my code. </p>
  
  <p>What I would like is for the arc of the circle to do a draw animation from 0deg to 360deg whenever the mouse is clicked.</p>
  
  <p>I know that I should put this in a loop that increases the angle, but I keep running into issues with (I think) translate.</p>
  
  <p>Here is my code so far:
  <a href="https://jsfiddle.net/s7aufv0g/2/" rel="nofollow">https://jsfiddle.net/s7aufv0g/2/</a></p>
  
  <p>This is where I draw the ball:</p>
  
  <pre><code>// Draw the ball
  
  ctx.clearRect(0,0,width,height);
  
  ctx.save();
  ctx.translate(ball.position.x, ball.position.y);
  ctx.beginPath();
  ctx.arc(0, 0, ball.radius, 0, Math.PI*2, true);
  
  ctx.stroke();
  
  ctx.closePath();
  
  ctx.restore();
  </code></pre>
  
  <p>Any help would be great, thank you very much. </p>