Как управлять скоростью анимации в canvas?

let canvas = document.querySelector('#cvs'); 
let ctx = canvas.getContext('2d'); 
let levelOfKnowledge = document.querySelector('#percent'); 
let nameOfKnowledge = 'HTML'; //имя знания 
let pi = Math.PI; 
let coefficient = pi * 2 / 100; 
let min = 0; //точка старта анимации 
let maxPercent = 78; //процент знаний 
let circleStyle = 50; 
 
//функция которая вроде как должна помочь с плавностью анимации 
// t: current time/currnet step 
// b: starting position 
// c: amount of change (end - start) 
// d: total animation time/steps 
function easeInOutQuart(t, b, c, d) { 
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 
  return -c/2 * ((t-=2)*t*t*t - 2) + b; 
} 
 
let start = 0; 
let frameRate = 60 / 1000; 
let duration = 1000; 
let currentStep = 0; 
let newStep = 0; 
 
let draw = () => { 
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  currentStep++; 
  newStep = easeInOutQuart(currentStep, start, start - maxPercent, frameRate * duration); //запишу в переменную что бы читалось лучше 
   
  ctx.beginPath(); 
  ctx.strokeStyle = "hsl(190, 80%," + circleStyle + "%" + ")"; 
  ctx.lineWidth = "30"; 
  ctx.arc(150, 150, 100, 0, min / newStep, false); // использую здесь 
  ctx.stroke(); 
  levelOfKnowledge.innerHTML = `${nameOfKnowledge}  ${Math.round(min)} %`; 
  min++; 
  circleStyle--; 
   
   
  if (min <= maxPercent) { 
    requestAnimationFrame(draw); 
  } else { 
     
    // alert(`Мой скилл ${nameOfKnowledge} равен ${maxPercent}% ✔`) 
  } 
   
}; 
 
draw();

canvas { 
  border: 1px solid #000; 
} 
 
#percent { 
  color: green; 
  position: absolute; 
  left: 20px; 
  bottom: 20px; 
} 
 
.doghnuts { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  position: relative; 
}

<div class="doghnuts"> 
  <canvas width="350" height="350" id="cvs"></canvas> 
  <div id="percent"></div> 
</div>