Как исправить анимацию canvas, чтобы вместо круга отрисовывалась дуга?

Question

[Apexis]

Хочу сделать анимацию дуги на canvas. До начала анимации дуга отрисовывается нормально, но после завершения анимации выходит круг, а не дуга. Как исправить?
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

[Apexis]

Вопрос решился. Нужно было добавить ctx.beginPath(); перед отрисовкой арки.