Different results using the same maths in different browsers

Question

Edit: since chrome has updated the browser - this question is some what redundant as they have fixed an internal bug which means this problem no longer occurs.

I have an animation of a circle anchored to the center of the canvas.

The larger the circle becomes the less stable the motion is. But not only that, for me at least it is significantly worse in Chrome to Firefox.

The math is done in this function:

function update(deltaTime){
    var centerX = canvas.width/2;
    var centerY = canvas.height/2;
        i.currentAngle = (i.currentAngle || 0) + (deltaTime/1000 * i.rotationSpeed);

    if(i.currentAngle>2*Math.PI){
        i.currentAngle-=2*Math.PI;
    }
        i.x = centerX + (i.radius*i.factor) * Math.cos(i.currentAngle);
        i.y = centerY + (i.radius*i.factor) * Math.sin(i.currentAngle);  
}

This is the code in working example:

http://jsfiddle.net/96QDK/

Chrome outputs:

Firefox Outputs:

Firefox seems to be closest to what I am aiming for yet Chrome is just wacky.

Why do I get such different results? I should mention I've asked a few people what they see, and everyone is seeing different amounts of inaccuracy.

Answer 1

The problem is not with the Javascript math; it's with the canvas.

http://jsfiddle.net/LDWBX/

function bigCircle(angle) {
    var radius = 5000; //the bigger, the worse
    var x = canvas.width/2 + radius*Math.cos(angle);
    var y = canvas.height/2 + radius*Math.sin(angle);

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.lineWidth = 2;
    ctx.stroke();
}

Notice that numbers appear exactly the same as in Firefox, but the red arc is obviously drawn incorrectly in Chrome.

Interestingly, this works for all angles that are multiples of Math.PI / 4 but is off for values between those (hence the undulating behavior in the OP's example).

I've logged Chromium bug #320335.

EDIT: It looks like it was first reported in May 2012, and was caused by a bug in the Skia library.

It has now been resolved as fixed.