<!DOCTYPE html>
<html lang="is">
<head>
    <meta charset="utf-8">
    <title>Klukka</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Ísak Sigurjón Bragason">
    <meta name="description" content="Javascript klukka á HTML5 Canvas">
    <meta name="keywords" content="HTML5, canvas, javascript, clock">
    <style>
    body
    {
        background-color:#272822;
    }
    canvas
    {
        display:block;
        margin:0 auto;
        width:95%;
        max-width:700px;
    }
    </style>
</head>
<body>
    <canvas id="klukka"></canvas>
    <script>
        var //
        clockRadius = 250,
        color1 = "#f60",
        color2 = "#afaead",
        color3 = "#cfcecd";

        var canvas = document.getElementById("klukka");		
        canvas.width = Math.ceil(clockRadius * 2.8);
        canvas.height = Math.ceil(clockRadius * 2.8);

        var //
        ctx = canvas.getContext("2d"),
        cx = canvas.width / 2,
        cy = canvas.height / 2;

        function clock () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            var d = new Date(),
            h = d.getHours(),
            hu = d.getHours(),
            m = d.getMinutes(),
            s = d.getSeconds();

            if (h > 12) {
                h -= 12;
            } else if (h === 0) {
                h = 12;
            }
            h += m / 60;

            var hRadius = clockRadius * 0.6,
            hangle = - h / 6 * Math.PI + Math.PI / 2,
            hx = cx + (Math.cos(hangle) * hRadius),
            hy = cy - (Math.sin(hangle) * hRadius),

            mRadius = clockRadius * 0.9,
            mangle = - m / 30 * Math.PI + Math.PI / 2,
            mx = cx + (Math.cos(mangle) * mRadius),
            my = cy - (Math.sin(mangle) * mRadius),

            sRadius = clockRadius * 0.9,
            sangle = - s / 30 * Math.PI + Math.PI / 2,
            sx = cx + (Math.cos(sangle) * sRadius),
            sy = cy - (Math.sin(sangle) * sRadius);

            ctx.beginPath();
            ctx.strokeStyle = color1;
            ctx.lineWidth = Math.ceil(0.03 * clockRadius);
            ctx.arc(cx, cy, clockRadius, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.strokeStyle = color2;
            ctx.lineWidth = Math.ceil(0.03 * clockRadius);
            ctx.arc(cx, cy, clockRadius + 4, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.font = "bold " + Math.floor(0.22 * clockRadius).toString() //
            + "px Monaco, Courier, monospace";
            ctx.fillStyle = color2;
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText(hu.toString().padStart(2, '0') + ":" //
            + m.toString().padStart(2, '0') //
            + ":" + s.toString().padStart(2, '0'), cx, cy + clockRadius / 2);
            ctx.closePath();

            for(var i = 1; i <= 12; i++) {
                var numx = cx + (Math.cos(- i / 6 * Math.PI + Math.PI / 2) //
                * Math.floor(clockRadius * 1.25));
                var numy = cy - (Math.sin(- i / 6 * Math.PI + Math.PI / 2) //
                * Math.floor(clockRadius * 1.25));

                var outx = cx + (Math.cos(- i / 6 * Math.PI) //
                * Math.ceil(clockRadius * 1));
                var outy = cy - (Math.sin(- i / 6 * Math.PI) //
                * Math.ceil(clockRadius * 1));

                var inx = cx + (Math.cos(- i / 6 * Math.PI) //
                * Math.ceil(clockRadius * 0.88));
                var iny = cy - (Math.sin(- i / 6 * Math.PI) //
                * Math.ceil(clockRadius * 0.88));

                ctx.beginPath();
                ctx.strokeStyle = color3;
                ctx.lineWidth = Math.ceil(0.02 * clockRadius);
                ctx.moveTo(inx, iny);
                ctx.lineTo(outx, outy);
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.font = Math.floor(0.22 * clockRadius).toString() //
                + "px Helvetica, sans-serif";
                ctx.fillStyle = color2;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fillText(i, numx, numy);
                ctx.closePath();
            }
            for(var i = 1; i <= 60; i++) {
                if ( (i % 5) != 0 ) {
                    var outx = cx + (Math.cos(- i / 30 * Math.PI) //
                    * Math.ceil(clockRadius * 1));
                    var outy = cy - (Math.sin(- i / 30 * Math.PI) //
                    * Math.ceil(clockRadius * 1));

                    var inx = cx + (Math.cos(- i / 30 * Math.PI) //
                    * Math.ceil(clockRadius * 0.94));
                    var iny = cy - (Math.sin(- i / 30 * Math.PI) //
                    * Math.ceil(clockRadius * 0.94));

                    ctx.beginPath();
                    ctx.strokeStyle = color3;
                    ctx.lineWidth = Math.ceil(0.01 * clockRadius);
                    ctx.moveTo(inx, iny);
                    ctx.lineTo(outx, outy);
                    ctx.stroke();
                    ctx.closePath();
                }
            }
            ctx.beginPath();
            ctx.strokeStyle = color3;
            ctx.lineWidth = Math.ceil(0.1 * clockRadius);
            ctx.lineCap = "round";
            ctx.moveTo(cx, cy);
            ctx.lineTo(hx, hy);
            ctx.stroke();
            ctx.beginPath();
            ctx.lineWidth = Math.ceil(0.06 * clockRadius);
            ctx.lineCap = "round";
            ctx.moveTo(cx, cy);
            ctx.lineTo(mx, my);
            ctx.stroke();
            ctx.beginPath();
            ctx.lineWidth = Math.ceil(0.04 * clockRadius);
            ctx.lineCap = "round";
            ctx.moveTo(cx, cy);
            ctx.lineTo(sx, sy);
            ctx.stroke();
            ctx.closePath();
            window.requestAnimationFrame(clock);
        }
        clock();
    </script>
</body>
</html>