Canvas Timer

by OmShiv

HTML

<canvas id="canvas" width="450" height="450"></canvas>
        <div id="fps"></div>

CSS

*{
    margin:0;
    padding:0;
}
body {
    background-color:#ccc;
    color:#fff;
    font:14px/1.3 sans-serif;
}
#fps {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: black;
    font:18px/1.3 sans-serif;
}

JavaScript

var filterStrength = 20;
var frameTime = 0, lastLoop = new Date(), thisLoop;
var canvas, ctx;


function startWatch() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    var currentDateTime = new Date();

    var hours = currentDateTime.getHours();
    if (hours < 10) {
        hours = "0" + hours;
    }

    var minutes = currentDateTime.getMinutes();
    if (minutes < 10) {
        minutes = "0" + minutes;
    }

    var seconds = currentDateTime.getSeconds();
    if (seconds < 10) {
        seconds = "0" + seconds;
    }

    var timeString = hours + ':' + minutes + ':' + seconds;

    ctx.font = 'bold ' + canvas.width / 4 + 'px sans-serif';

    var dim = ctx.measureText(timeString);

    var y = (canvas.height - 30) / 2;
    var x = (canvas.width - dim.width) / 2;

    ctx.fillText(timeString, x, y);   
    
      var thisFrameTime = (thisLoop=new Date()) - lastLoop;
      frameTime+= (thisFrameTime - frameTime) / filterStrength;
      lastLoop = thisLoop;

}

$(document).ready(function() {
    canvas = $('#canvas')[0];
    ctx = canvas.getContext('2d');
    setInterval(startWatch,1000);
    var fpsOut = document.getElementById('fps');
    setInterval(function(){
      fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps";
    }, 1000);
});