I just realized that Chrome (Edge too) does not perform canvas rotations ctx.rotate() if the angle is under 0.014 degrees. It works fine on Firefox (Windows 10).
Any ideas for a workaround? I am using 0.01 degrees in my design. Using bigger angles is not an option as it changes the design.
const canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d');
let cw = canvas.width = canvas.height = 600;
ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, cw, cw);
let angle = 0.01;
for (let i = 1; i <= 5000; i++) {
ctx.translate(cw / 2, cw / 2); ctx.rotate(angle * Math.PI / 180); ctx.translate(-cw / 2, -cw / 2);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(500, 200);
ctx.lineWidth = 10;
ctx.strokeStyle = '#FFFFFF';
ctx.stroke();
}<canvas></canvas>That's a very weird bug that I did report thanks to you.
For the time being, a very quick workaround is to use a DOMMatrix to set the transform, this API doesn't seem to be affected by this bug.
const canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d');
let cw = canvas.width = canvas.height = 600;
ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, cw, cw);
let angle = 0.01;
const mat = new DOMMatrix();
for (let i = 1; i <= 5000; i++) {
mat.translateSelf(cw / 2, cw / 2);
mat.rotateSelf(angle); // DOMMatrix.rotate is in angle...
mat.translateSelf(-cw / 2, -cw / 2);
ctx.setTransform(mat);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(500, 200);
ctx.lineWidth = 10;
ctx.strokeStyle = '#FFFFFF';
ctx.stroke();
}<canvas></canvas>