Canvas FPS with filter

by samc

HTML

<canvas id="mycanvas" width="300" height="200"></canvas>

CSS

canvas{
    border: 3px solid #fd3300;
}

JavaScript

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        function (callback, element) {
            window.setTimeout(function () {
                callback();
            }, 1000 / 60);
        };
})();

(function (window, document) {
    var fps    = 0;
    var filter = 60;
    var lastRun;
    
    var canvas  = document.getElementById('mycanvas');
    var context = canvas.getContext('2d');
    var width   = canvas.width;
    var height  = canvas.height;

    function outputFPS () {
        context.fillStyle = 'Black';
        context.font      = 'normal 16pt Arial';
        context.fillText(fps.toFixed(1) + ' fps', 10, 26);
    }
    
    function mainLoop () {
        if (lastRun) {
            var delta = (new Date().getTime() - lastRun)/1000;
            var currentFPS = (1/delta);
            
            fps += (currentFPS - fps) / filter;
            
            //Clear screen
            context.clearRect(0, 0, width, height);
            outputFPS();
        }
        
        lastRun = new Date().getTime();
        requestAnimFrame(mainLoop);
    }
    
    mainLoop();
}(this, this.document))