CODEWITHSUNDEEP
htmlanimationhtml5-canvas
Pattle
Pattle

Reputation: 6016

What is the optimum FPS when doing canvas animations?

I am using canvas for some animations and I am using the requestAnimationFrame API 

window.requestAnimFrame = (function(callback)
{
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

    //Call the function for the next animation at 60 fps        
    function(callback) {window.setTimeout(callback, 1000 / 60);};
})();

In most examples I have seen on the web the setTimeout is set at 60 FPS. Obviously I can set this higher for a smoother animation but this will come at a performance cost for the user. I was just wondering if anyone can point me to some good information on how high I should set this or the optimum framerate for canvas animations? Does this also vary based on the browser someone is using?

Upvotes: 0

Views: 515

Answers (1)

mgluesenkamp
mgluesenkamp

Reputation: 529

The 60 fps are connected to the most used screen refresh rate of 60 Hz. That's why you find this value everywhere.

To get the "optimum" is imo very difficult. How smooth the animation is, is highly dependent on the hardware and browser. A simple directed graph (visualized with D3 and SVG) is stuttering on my notebook with Firefox. On the Mac of my colleague with Chrome the animation works fine. (The hardware is nearly the same.)

I think that 60 fps are the best configuration. Because of the refresh rates of the screens, there is no use for maybe 120 fps.

Upvotes: 2

Related Questions