Как анимировать шар, уменьшающийся в холсте HTML5

Question

Я пытаюсь сделать шар всё меньше и меньше, используя HTML5 canvas.Я смог сделать его больше, поэтому я подумал, что обратное будет простым.Что я здесь не так делаю?Console.log показывает мне значения от 11 до 0, уменьшающиеся на 1. Когда x меньше 0, он останавливается.Но шар не меняет форму, и я подозреваю, что он рисует мелкие фигуры друг над другом, возможно?Я думал, что clearRect будет работать для этого?

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);   
    }
}

Демонстрация доступна по адресу: http://www.chronicled.org/dev/test.html

Спасибо!

Answer 1

Вызов fill() снова заполняет старый прямоугольник. Попробуйте вместо этого:

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);   
    }
}

Answer 2

добавить context2D.beginPath(); в начало розыгрыша2 (также не помешало бы иметь его в розыгрыше)

.fill заполняет весь путь, который включает в себя старые дуги