Canvas ctx.rotate() with very small angles (less than 0.014) not working on Chrome

JavaScript
1

Hi, I just noticed that Chrome 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 drawing. Using bigger angles is not an option as it changes the drawing.

Following is a sample case to demonstrate the issue:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <canvas></canvas>
    <script>
    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();
    }
    </script>
</body>
</html>
3

What do you mean with „it changes the image“?

To be honest I cannot even see a difference when I change the angle to 0.1 (reducing the loop to 500 of course)

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.