Edit in JSFiddle

<canvas id="canvas" width="300" height="300"></canvas>

              
const canvas = document.getElementById('canvas');

function anim(canvas, duration) {
  const ctx = canvas.getContext('2d');
  let begin, progress;

  function draw(now) {
    begin = begin || now;
    progress = ((now - begin) / duration) % 1;

    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const r = Math.min(cx, cy) - 10;
    const angel = progress * 2 * Math.PI;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.arc(cx, cy, r, 0, angel, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 0, 0, 0.75)';

    const dotX = Math.cos(angel) * r + cx;
    const dotY = Math.sin(angel) * r + cy;
    ctx.arc(dotX, dotY, 10, 0, 2 * Math.PI, false);
    ctx.fill();

    requestAnimationFrame(draw);
  }
  requestAnimationFrame(draw);
}

anim(canvas, 5000);