Canvas Circle Clock

An analog clock drawn in the HTML5 canvas element with circles instead of arms.

by Taylor Lopez

CSS

*
{
    margin: 0;
    padding: 0;
}

body
{
    color: white;
    background-color: black;
}
canvas
{
    margin: 0 auto;
}

JavaScript

/******** START shiv for cross-browser requestAnimationFrame, DO NOT EDIT; ********/
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x <
vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame =
window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; }
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());
/******** END requestAnimationFrame shiv ********/

var fps = 60;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;

var innerHeight;
var innerWidth;
var minSize;
var $canvas;
var ctx;

var BG_COLOR = "#000";
var CLOCK_RADIUS = .49;
var CLOCK_STROKE = .02;
var CLOCK_STROKE_COLOR = "#222";
var HOUR_RADIUS = .1;
var HOUR_DIST = .25;
var HOUR_FILL_COLOR = "#CCC";
var MIN_RADIUS = .07;
var MIN_DIST = .37;
var MIN_FILL_COLOR = "#AAA";
var SEC_RADIUS = .05;
var SEC_DIST = .45
var SEC_FILL_COLOR = "#999";

$(function(){ // Main Code Entry Point
   
    $canvas = $(document.createElement("canvas"));
    ctx = $canvas[0].getContext("2d");
    updateSizes();
    $(window).on('resize', updateSizes);
    $("body").append($canvas);

    runClock();    
});

function updateSizes()
{
    innerHeight = window.innerHeight;
    innerWidth = window.innerWidth;
    minSize = Math.min(innerHeight, innerWidth);
    ctx.lineWidth = minSize * CLOCK_STROKE;
    $canvas.css("margin-top", (Math.abs(innerHeight - innerWidth) / 2) + "px");
    $canvas.attr("width", minSize).attr("height", minSize);
   ...