title: How to animate a ball becoming smaller in HTML5 canvas
body: <p>I'm trying to make a ball become increasingly smaller using HTML5 canvas. I've been able to make it grow larger, so I figured the reverse would be simple. What am I doing wrong here? Console.log shows me values from 11 to 0 decreasing by 1. When x is less than 0, it stops. But the ball doesn't change shape, and I suspect its because it's drawing smaller shapes on top of each other, perhaps? I thought clearRect would work for that?</p>
  
  <pre><code>function draw2()
  {
      console.log(x);
      context2D.clearRect(0, 0, canvas.width, canvas.height);
      context2D.arc(10, 10, x, 0, Math.PI * 2, true);
      context2D.fill();
      x -= 1;
      if (x &lt; 0) {
          clearInterval(s);   
      }
  }
  </code></pre>
  
  <p>A demo is available at: <a href="http://www.chronicled.org/dev/test.html" rel="nofollow">http://www.chronicled.org/dev/test.html</a></p>
  
  <p>Thanks!</p>