First time poster (please be gentle)
Using HTML/Javascript canvas I have drawn the 12 numbers of the clock face, and I am now making them rotate in a circle, like orbiting planets. The code is silky smooth for about 0.5 seconds with console.log showing 7ms interval between logs, but then it slows until it logs at 30ms intervals after just two rotations, with further lag beyond this. I have also tried with setTimeout and setInterval but I can’t figure out how to stop this lag and get a consistent timing.
Thank you <3
HTML:
<canvas id="clock" width="400px" height="400px"></canvas>
const clk = document.getElementById("clock").getContext("2d");
clk.font = "20px Arial";
clk.strokeStyle = "black";
clk.textAlign = "center";
let rotationCounter = 0; // increment rotation for each function call
function drawNumbers() {
clk.clearRect(0, 0, 400, 400); // draw the clock base
clk.fillStyle = "lightgrey";
clk.arc(200, 200, 180, 0, Math.PI * 2);
clk.fill();
clk.fillStyle = "black";
clk.translate(200, 200); // set origin to center, for drawing numbers
// draw the 12 numbers
for (let i = 1; i < 13; i++) {
let ang = (i * 30) + rotationCounter;
clk.rotate((ang * Math.PI) / 180);
clk.translate(0, -150);
clk.rotate((-ang * Math.PI) / 180)
clk.fillText(i.toString(), 0, 0);
clk.rotate((ang * Math.PI) / 180)
clk.translate(0, 150);
clk.rotate((-ang * Math.PI) / 180);
}
clk.translate(-200, -200); // return canvas to original position
rotationCounter += 1;
if (rotationCounter >= 720) {
return; // escape
}
window.requestAnimationFrame(drawNumbers);
}
window.requestAnimationFrame(drawNumbers); // initialise