FPS Monitoring widget for HTML5 Canvas demos
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



an fps monitor for HTML5 canvas demos

Author: Corban Brook @corban 3D Modelling: Tomasz Dysinkski @bunnybones

View the LIVE Demo!

HeartRate is a cute fps calculator and monitor you can EASILY add to your HTML5 Canvas demos. HeartRate intends to be aesthetically rich and customizable yet light on CPU cycles. It is composed of 3 parts:

  • an animated icon,
  • fps text display,
  • and a line graph.


The idea was taken from the wonderful @mrdoob's Stats.js available on github. I noticed the fancy meter seemed to add a lot of aesthetic value to the demos. So why not contribute another fancy meter to the HTML5 demoscene?


After showing Tomasz Dysinkski my initial design he offered to donate 20 mins of his time and quickly modelled up a 3d rotating heart. I think it looks great, Thank you!

Bobby Richter helped optimize the flocking demo and find bugs.


Using HeartRate is easy, simply add it to the draw loop you wish to monitor.

var FPS = 50;

var heartRate = new HeartRate({{context: ctx, maxFPS: FPS, path: "./heartrate"}); 

window.setInterval(draw, 1000/FPS);

function draw() {
  heartRate.monitor(10, 10); // calculates FPS and renders HeartRate monitor on canvas x, y position


If you wish you can use HeartRate without canvas to simply calculate fps and frameCount.

var FPS = 50;

var heartRate = new HeartRate(); 

window.setInterval(draw, 1000/FPS);

function draw() {
  heartRate.calculate(); // calculates FPS in headless mode
  console.log(heartRate.frameRate + " " + heartRate.frameCount);



Customizing the theme of HeartRate is dead simple. HeartRate loads 2 images: bg.png and spritestrip.png, they along with spritestrip.html (a sprite strip generator) can be found in the heartrate/images/ directory. You can swap out these images with something of your choosing.

spritestrip.html is a simple generator script which loads, scales and draws multiple images into a canvas element, which can be saved as a dataURL or right-clicked and saved as an image (.png to preserve transparency).

If your sprite or bg dimensions change from the default you will have to edit heartRate.js and modify some width and height properties but it should be easy enough to figure out what is going on, HeartRate is less than 100 lines of code after all and plans to stay that way :)

If you do end up making your own theme, drop me a message, I would love to see it. Theme support might be a cool feature to add.