Calculate FPS in Canvas using requestAnimationFrame

Question

How could I calculate the FPS of a canvas game application? I\'ve seen some examples, but none of them use requestAnimationFrame, and im not sure how to apply their solution

Answer 1

Chrome has a built-in fps counter: https://developer.chrome.com/devtools/docs/rendering-settings

Just open the dev-console (F12), open the drawer (Esc), and add the "Rendering" tab.

Here, you can activate the FPS-Meter overlay to see the current framerate (incl. a nice graph), as well as GPU memory consumption.

Cross-browser solution: You can get a similar overlay with the JavaScript library stat.js: https://github.com/mrdoob/stats.js/

It also provides a nice overlay for the framerate (incl. graph) and is very easy to use.

When comparing the results from stats.js and the chrome dev tools, both show the exact same measurements. So you can trust that library to actually do the correct thing.