CODEWITHSUNDEEP
javascriptgoogle-chromecanvasrotation
psycho brm
psycho brm

Reputation: 7674

Canvas bug - no rotation at 90 degrees in Chrome

I'm trying to draw a rotated and scaled circle in canvas.

When I rotate it by exactly 90 degrees, it does not rotate! It rotates at 89, 89.9. But not at exactly 90 (edit: breaks at 90 +-0.013, starts working at +-0.014). The problem only appears in Chrome (latest 29.0.1547.76 m), while Firefox and IE work fine.

c.save();
    c.translate(100, 100);
    r += 5;
    c.rotate(r * inRads);   // when r = 90, it renders as if r = 0
    c.scale(1, 2);

    c.beginPath();
    c.arc(0, 0, 20, 0, 2*Math.PI);
    c.closePath();
    c.fillStyle = '#f00';
    c.fill();
c.restore();

This is GIF of how it looked: chrome rotation 90 degrees bug

See the reproduced problem here: http://jsfiddle.net/qeWcE/1/ It is fixed now.

Is there a workaround for this?

Upvotes: 3

Views: 291

Answers (1)

psycho brm
psycho brm

Reputation: 7674

This seems to help:

// fixes bug when r = (90 +-0.013) jumps to r = 0
function chrome_fix_rotation_bug(r)
{
    var rr = Math.round(r);
    if (Math.abs(rr-r) < 0.02 && rr%90==0) return rr+0.02;
    return r;
}

// use like this:
r = chrome_fix_rotation_bug(r);
c.rotate(r * inRads)

Upvotes: 1

Related Questions