How to animate a ball becoming smaller in HTML5 canvas

Question

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?

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 < 0) {
        clearInterval(s);   
    }
}

A demo is available at: http://www.chronicled.org/dev/test.html

Thanks!

Answer 1

add context2D.beginPath(); to the beginning of draw2 (it also wouldn't hurt to have it in draw)

the .fill is filling the whole path which includes the old arcs

Answer 2

The fill() call is filling the old rect again. Try this instead:

function draw2()
{
    console.log(x);     
    context2D.clearRect(0, 0, canvas.width, canvas.height);

     context2D.beginPath();
     context2D.arc(15, 15, x, 0, Math.PI * 2, true);
     context2D.fill();
     context2D.closePath();
    x -= 1;
    if (x < 0) {
        clearInterval(s);   
    }
}