I made this jsFiddle that uses EaselJS from CreateJS to update a simple canvas on defined frame rate of 60 FPS. There is just a simple circle on the stage, so I would expect the FPS label to show constant 60FPS on every browser. But here's what I've found:
Chrome: FPS: 60.82474226801933
IE: FPS: 60.095788862740555
Firefox: FPS: 43.2232327656598
Why not also 60FPS
in Firefox? I am using Firefox 29.0.1. No other tabs were opened, cache was cleared, window was active, no other applications were running.
slower canvas speed seems to be a trend with Firefox.
On my machine, I get a solid 59-60, but for best practices, you may want to use requestAnimationFrame
as 2astalavista mentioned in conjunction with setting FPS. To do that in CreateJS, just set the timing mode to RAF_SYNCHED
:
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.setFPS(60);
Documentation on Timing Modes: http://www.createjs.com/tutorials/Animation%20and%20Ticker/
Updated Fiddle: http://jsfiddle.net/2247N/1/