draw circle process indicator by canvas

process.js

let canvas = document.querySelector('#canvas'); // id of canvas element
let ctx = canvas.getContext('2d')
ctx.lineWidth = 10;
ctx.lineCap = "round"

let process = 0
let middle = canvas.width * 0.5;

function draw(process) {
  console.log(process)
  if (Number.parseInt(process) == 1) return;
  process += 0.01
  requestAnimationFrame(draw)
  ctx.save()
  ctx.translate(middle, middle)
  ctx.rotate(-Math.PI * 0.5)
  ctx.translate(-middle, -middle)
 
  ctx.clearRect(0,0,300,300)
  
  ctx.beginPath();
  ctx.arc(middle, middle, width, 0, process * Math.PI * 2)
  ctx.strokeStyle = `rgb(${255 - process * 255 },${process*255},0)`
  ctx.stroke()
  ctx.closePath()
  ctx.restore()
  
}

draw()