Different results using the same math in different browsers

Question

Edit: since chrome updated the browser - this question is somewhat redundant as they fixed an internal error, which means that this problem no longer occurs.

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

The more the circle becomes less stable, the greater the movement. But not only that, for me, at least, it is significantly worse in Chrome for Firefox.

Mathematics is performed 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; } ix = centerX + (i.radius*i.factor) * Math.cos(i.currentAngle); iy = centerY + (i.radius*i.factor) * Math.sin(i.currentAngle); } 

This is the code in a working example:

http://jsfiddle.net/96QDK/

Chrome Outputs:

Firefox Outputs:

Firefox seems to be closest to what I was aiming for, but Chrome is just stupid.

Why am I getting such different results? I must mention that I asked several people what they see, and each sees a different degree of inaccuracy.

Answer 1

The problem is not Javascript math; it is with a 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(); } 

Note that the numbers are displayed exactly the same as in Firefox, but the red arc is clearly not displayed correctly in Chrome.

Interestingly, this works for all angles that are multiples of Math.PI / 4 , but disabled for values ​​between them (hence the wave-like behavior in the OP example).

I registered Chromium bug # 320335 .

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

Now it is resolved as fixed .

Answer 2

It doesn’t give you an answer, but it’s interesting that there is a math problem in Chrome

 i.currentAngle => 0.0; (deltaTime/1000 * i.rotationSpeed) = 0.025; i.currentAngle + (deltaTime/1000 * i.rotationSpeed) = 2215385637.025; 

If you get the individual parts into variables from Update () and in draw () so you can use

 var current = i.currentAngle; var delta = (deltaTime/1000 * i.rotationSpeed); ctx.fillText(("angle == " + current+ " delta " + delta),10,50); 

you will receive (0,025 and 0) printed

if you then go to

 var current = i.currentAngle; var delta = (deltaTime/1000 * i.rotationSpeed); i.currentAngle = current + delta; ctx.fillText(("angle == " + i.currentAngle + " delta " + delta),10,50); 

You get crazy great value.

but if you do

 var newval = current + delta; ctx.fillText(("angle == " + newval + " delta " + delta),10,50); 

then newval has a value of about 0.025, as expected.

Strange if you then follow these

 var newval = current + delta; i.currentAngle = newval ctx.fillText(("angle == " + newval + " delta " + delta),10,50); 

then newval is now an absolutely crazy value ....