How to make CANVAS animation?

Question

JavaScript

Friends, I need help with CANVAS, the animation is simple, a circle with a percentage stroke.

Animation

I am extremely new to canvas, and it seems that I have cut out the code that is responsible for this animation, but it still does not work, tell me what's wrong? In which direction to dig?

My code

Answer 1

https://www.youtube.com/watch?v=JFdguwXoeuw

Answer 2

Found a similar implementation https://codepen.io/egorava/pen/wGmmJW

Answer 3

There are methods for drawing arcs.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
arcTo(x1, y1, x2, y2, radius)
This is how you can sketch a circle:

ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true);
    ctx.stroke();

Like this arc:

ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI,false);  // рот (по часовой стрелке)
    ctx.stroke();

Dare ;)