HTML5 Canvas FPS display
4/13/2012 4:00 PM

This is a bit of code to see how many frames per second you are getting in your HTML5 canvas game.  It will use a variable to count the FPS and one to hold the count after one second.  In your main game loop increment the counter by 1 for each pass. You can use setInterval to fire every second and store the count to display it and then reset the count for the next second.  Here is how.

Add a variable to hold the count.  I will call mine fps.  Add a variable to hold the frames per second total that you will display on the canvas.  I will call mine fpsDisplay. Create a function that sets fpsDisplay = fps and then fps =0.  Then call that function using setInterval with a time in ms of 1000 (1 second).  In your main game loop set fps++; 

The code is in the full article.

var fps = 0;
var fpsDisplay = 0;

setInterval(countFPS, 1000);

countFPS() {
     fpsDisplay = fps;
     fps = 0;

function gameLoop() {
     fps ++;
     ctx.font = "20pt Calibri";
     ctx.fillStyle = "#ffffff";
     ctx.fillText("FPS: " + fpsDisplay, 5, 30);


blog comments powered by Disqus