animation_framerate.html

<!DOCTYPE html>
<html>
<body>


<canvas id="myCanvas" width="200" height="100" style="border: 3px solid #fd3300;;
    position: relative; 
    left: 200px; 
    right: 100px; 
    bottom: 100px; 
    top: 200px">
Your browser does not support the HTML canvas tag.
</canvas> 


<script>
var fps = 0;

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame   || 
    window.mozRequestAnimationFrame      || 
    window.oRequestAnimationFrame        || 
    window.msRequestAnimationFrame       || 
    function(callback, element){
        window.setTimeout(function(){
           
            callback(+new Date);
        }, 1000 / 60);
    };
})();

var lastRun;
(function(window, document){

    var canvas       = document.getElementById("myCanvas"),
        context      = canvas.getContext("2d"),
        width        = canvas.width,
        height       = canvas.height,
        game_running = true,
        show_fps     = true;

    function showFPS(){
        context.fillStyle = "Red";
        context.font      = "normal 16pt Arial";

        context.fillText(fps + " fps", 10, 26);
    }
    function gameLoop(){
        if(!lastRun) {
            lastRun = new Date().getTime();
            requestAnimFrame(gameLoop);
            return;
        }
        var delta = (new Date().getTime() - lastRun)/1000;
        lastRun = new Date().getTime();
        fps = 1/delta;
        //Clear screen
        context.clearRect(0, 0, width, height);

        if (show_fps) showFPS();

        if (game_running) requestAnimFrame(gameLoop);

    }
    
    gameLoop();

}(this, this.document))
</script>
</body>
</html>