Ring Clock

Clock with second, minute, hour rings as well as a second hand.

by astanislaus

HTML

<canvas id="clock" width="768" height="768"></canvas>

CSS

body {
    background: #0000;
}

JavaScript

(function(window) {
    // Grab the canvas and it's context
    var canvas = window.document.getElementById("clock"),
        context = canvas.getContext("2d"),
        requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

    // Floating-point rounding in JS
    Math.roundFloat = function(number, precision) {
        var multiple = Math.pow(10, precision);
        return Math.round(number * multiple) / multiple;
    };

    Math.easeInOutQuad = function(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    };


    // Clear the canvas

    function clearCanvas() {
        context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
    }

    // Draw circle with specified center (x, y) and radius

    function drawCircle(x, y, radius) {
        context.beginPath();
        context.arc(x, y, radius, Math.PI * 2, 0, true);
        context.closePath();

        context.fill();
    }


    // Draw a ring with a specified radius, width, and fill

    function drawRing(x, y, outsideRadius, ringWidth, percentFilled, rotationAngle) {
        context.beginPath();

        context.arc(x, y, outsideRadius - ringWidth / 2, rotationAngle, (rotationAngle - 2 * Math.PI) + 2 * Math.PI * percentFilled, true);

        context.lineWidth = ringWidth;
        context.stroke();
    }

    // Draw a line from (x1, y1) to (x2, y2)

    function drawLine(x1, y1, x2, y2, lineWidth) {
        context.beginPath();
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.closePath();

        context.lineWidth = lineWidth;
        context.stroke();
    }

    // Draw the clock
    var startValue = 0;

    function redrawClock() {
        // The the time
        var timestamp = new Date(),
            milliseconds = timestamp.getMilliseconds(),
            seconds = timestamp.getSeconds(),
           ...