Me acabo de dar cuenta de que Chrome (Edge también) no realiza rotaciones de lienzo ctx.rotate() si el ángulo es inferior a 0.014 grados. Funciona bien en Firefox (Windows 10).
¿Alguna idea para una solución? Estoy usando 0.01 grados en mi diseño. Usar ángulos más grandes no es una opción ya que cambia el diseño.
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>Ese es un error muy extraño que informé gracias a ti.
Por el momento, una solución muy rápida es usar DOMMatrix para configurar la transformación, esta API no parece verse afectada por este error.
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>