How to animate a ball becomes smaller in HTML5 canvas

Question

I am trying to make the ball smaller and smaller using HTML5 canvas. I was able to make it larger, so I decided that the opposite would be simple. What am I doing wrong here? Console.log shows that values ​​from 11 to 0 decrease by 1. When x is less than 0, it stops. But the ball does not change shape, and I suspect, because it draws smaller pieces on top of each other, maybe? I thought clearRect would work for this?

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

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

Thanks!

Answer 1

add context2D.beginPath(); to the beginning of draw2 (this would also not hurt him in the draw)

.fill fills all the way that includes old arcs

Answer 2

A call to fill() fills the old rectangle again. Try 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); } }