I have coded a little engine to display 5 sprites using javascript in Canvas2D. Everything works fine and is completely optimised.
The FPS fluctuates between 30 and 60 – but the interesting thing is, it says on a constant 60 fps when the google javascript console is open!
Any body else experiencing this?
n.b. I am using requestAnimationFrame
Edit:
Example:
http://jsfiddle.net/jrPNy/1
Play Around with the “Particles” Number so your fps is around 40-50. Than open the console, and it goes up to 60 fps. (Chrome 21.0.1180.83)
As the question author remarked in a comment, this has to do with the visible canvas area. Opening the console reduces the height of the viewport, which on a normal-sized display means that there will be less content to render. 60 FPS is a soft limit given by the display refresh rate; doing more frames than that wouldn’t make sense since it’s impossible to display more than 60 frames per second on a normal monitor.
I tested this on my machine, reducing the CPU speed so that I don’t always get 60FPS. In the provided Fiddle example, I had around 24FPS normally. Opening the Console reduced the visible canvas to about 60% of its original size, and the FPS increased to 30 on average. Resizing the Console would influence the FPS accordingly: with only 10% of the canvas visible, the FPS wiggled around 42, and with a very small Console and the entire canvas visible, the FPS went slightly below the original value, to 23. Increasing the CPU speed brought the FPS to a constant 60, regardless of the state of the Console.
Now, given that the JavaScript that generates the screen is still running, regardless of how much of the canvas is visible, what influences the needed processing power is the actual rendering of the canvas, and the way the canvas image is composited onto the rest of the HTML, on the browser window, and finally onto the screen. More and more of that work is moved to the GPU, so when every stage of the compositing process will be done in OpenGL, the FPS should always be maxed out.