splatjs/lib/systems/draw-frame-rate.js

A 2D HTML5 Canvas game engine

"use strict";

module.exports = function(ecs, data) {
	ecs.add(function(entities, context, elapsed) { // jshint ignore:line
		var fps = Math.floor(1000 / elapsed);

		context.font = "24px mono";
		if (fps < 30) {
			context.fillStyle = "red";
		} else if (fps < 50) {
			context.fillStyle = "yellow";
		} else {
			context.fillStyle = "green";
		}

		var msg = fps + " FPS";
		var w = context.measureText(msg).width;
		context.fillText(msg, data.canvas.width - w - 50, 50);
	});
};