How can I fix the canvas animation so that an arc is drawn instead of a circle?

Question

JavaScript

I want to make arc animation on canvas. Before the animation starts, the arc draws fine, but after the animation ends, the circle comes out instead of the arc. How to fix?
jsbin.com/misituvexo/edit?html,js,output

<script type="text/javascript">
var canvas = document.getElementById('efficient');
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0,200,100,10);

grd.addColorStop(0, '#85dd00');
grd.addColorStop(0.5, '#85dd00');
grd.addColorStop(1, 'rgba(255,255,255,0)');

ctx.arc(100,100,80,1.5*Math.PI,1.16*Math.PI);
ctx.lineWidth = 40;
ctx.strokeStyle = grd;
ctx.textAlign = "center";
ctx.textBaseline  = "middle";
ctx.font="bold italic 2.5rem Arial";
ctx.fillStyle = "#454545";
ctx.fillText("---", 100, 100);
ctx.stroke();

var i = 0;
$('#efficientWrapper').mouseenter(function(){
    
(function run() {
  if (i <= 85) {
    requestAnimationFrame(run);
    ctx.clearRect (0,0,canvas.width,canvas.height);
    ctx.arc(100,100,80,1.5*Math.PI,(i/73)*Math.PI);
    ctx.stroke();
    ctx.fillText(i+"%", 100, 100);		
    i++;		
  }		
})();
})
</script>

Answer 1

The issue was resolved. It was necessary to add ctx.beginPath();before drawing the arch.