Drawing inverse segment of a circle

I am making graphics for a stopwatch with WebGL, and for the sprint interval the graphic works fine. When I try to the the inverse graphic for the pause interval by using the counterclockwise option for arc, only the first segment gets drawn and then the canvas is cleared. The stopwatch version with segments drawn for sprints only can be seen here

What seems to be happening when I set reverse to true is that stepCount only evaluates to 59, then the logic goes into the else branch and deletes the graphic. Does anyone have an idea how I can avoid this? Would be very much appreciated!

const canvas = document.getElementById('canvas');  const context = canvas.getContext('2d');    let sprintTimeouts = [];    function drawSegment(angle, reverse) {    context.clearRect(0, 0, canvas.width, canvas.height);    context.beginPath();    context.moveTo(300, 300);    context.lineTo(300, 100);    context.arc(300, 300, 300, -Math.PI/2, angle, reverse);    context.lineTo(300, 300);    context.fillStyle = 'rgba(255, 255, 255, 0.3)';    context.fill();  }    function sprintSegments(stepCount, step, initStep, reverse) {    if (stepCount > -1) {      // while stepcount is non-negative, draw segment with angle increasing with each step      drawSegment(-(0.5 - step) * Math.PI, reverse);      step += initStep;      stepCount--;      sprintTimeouts.push(setTimeout(sprintSegments, 47, stepCount, step, initStep, reverse));    } else {      // clear timeouts when stepCount is negative      sprintTimeouts.forEach(function(t) {        clearTimeout(t);      });      sprintTimeouts = [];      context.clearRect(0, 0, canvas.width, canvas.height);    }  }    function calcSprintSegments(ms, reverse = false) {    // calculate how many steps circle segments will be drawn in    let stepCount = ms / 50;    // calculate size of each step    let step = 2 / stepCount;    sprintSegments(stepCount, step, step, reverse);  }  

https://stackoverflow.com/questions/67035707/drawing-inverse-segment-of-a-circle April 10, 2021 at 10:49PM