Импульсный эффект с использованием ванили JavaScript

Question

Пытается создать импульсный эффект с помощью объекта canvas с простым ванильным javascript. Кажется, что каждая функция правильно звонит, и все мои значения записываются правильно, но по какой-либо причине, когда функция drawBall() вызывается в функции ballShrink(), ничего не происходит. Я ожидаю, что он оживет сжиматься, но это не так. ballRadius уменьшает, но анимации не происходит. У меня есть код здесь и JSFiddle здесь https://jsfiddle.net/96hthyw0/

function draw() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     drawBall(); 
    } 

function ballGrow() { 
    ballRadius += 1; 
    drawBall(); 
    if (ballRadius === 20) { 
     clearInterval(ballGrowInterval); 
     ballShrinkInterval = setInterval(ballShrink, 100); 
    } 
} 

function ballShrink() { 
    ballRadius -= 1; 
    drawBall(); 
    if (ballRadius === 0) { 
     clearInterval(ballShrinkInterval); 
    } 
} 

function testInterval() { 
    ballGrowInterval = setInterval(ballGrow, 100); 
} 

testInterval(); 
draw(); 

Answer 1

Проблема в том, вы не очищая свой последний рисунок, а просто добавлять новые рисунки поверх существующего. Вот обновленная скрипка: https://jsfiddle.net/96hthyw0/1/ но в общем все, что я сделал изменить ballShrink функцию следующим образом:

function ballShrink() { 
    ballRadius -= 1; 
    draw(); // clear canvas - note you could add this to ball grow too 
    drawBall(); 
    if (ballRadius === 0) { 
    clearInterval(ballShrinkInterval); 
    } 
}