Animar un círculo de relleno usando lienzo
Básicamente, quiero poder llenar un círculo usando un lienzo, pero se anima a un cierto porcentaje. Es decir, solo el círculo se llena hasta el 80% del camino.
Mi conocimiento del lienzo no es sorprendente. Aquí hay una imagen que hice en photoshop para mostrar lo que quiero.
Quiero que el círculo comience vacío y luego se llena para decir el 70% del círculo. ¿Es esto posible con Canvas, si es así? ¿Alguien puede arrojar algo de luz sobre cómo hacerlo?
Aquí hay un violín de lo que he logrado.
var canvas = document.getElementById('Circle');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#13a8a4';
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#ffffff';
context.stroke();
Cualquier ayuda sería apreciada masivamente