Analog Clock

by Chace

HTML

<div id="current-time">12:00:00 AM</div>
<canvas id="clock" width="200" height="200">
    If you can see this message, your browser does not support canvas and needs an update. Sorry. :(
</canvas>

CSS

#current-time {
    display: none;
    font-weight: bold;
    text-align: center;
    width: 200px;
    padding: 10px;
    border:1px solid #000000;
}
#clock {
    padding: 10px;
}

JavaScript

document.addEventListener('DOMContentLoaded', startTimer);

function startTimer() {
    setInterval(displayTime, 1000);
    displayTime();
}

function displayTime() {
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();

    var timeString = formatHour(h) + ":" + padZero(m) + ":" + padZero(s) + " " + getTimePeriod(h);

    document.querySelector("#current-time").innerHTML = timeString;
    // --- Analog clock ---//    
    var canvas = document.querySelector("#clock");
    var context = canvas.getContext("2d");
    var clockRadius = 60;   
    var clockX = canvas.width / 2;
    var clockY = canvas.height / 2;
    // Make sure TAU is defined (it's not by default)    
    Math.TAU = 2 * Math.PI;
    
    function drawArm(progress, armThickness, armLength, armColor) {
        var armRadians = (Math.TAU * progress) - (Math.TAU / 4);
        var targetX = clockX + Math.cos(armRadians) * (armLength * clockRadius);
        var targetY = clockY + Math.sin(armRadians) * (armLength * clockRadius);
        context.lineWidth = armThickness;
        context.strokeStyle = armColor;
        context.beginPath();
        context.moveTo(clockX, clockY);
        // Start at the center    
        context.lineTo(targetX, targetY);
        // Draw a line outwards    
        context.stroke();
    }
    // Clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Add circle
    context.beginPath();
    //var grd = context.createLinearGradient(0,0,0,150);
    //grd.addColorStop(0,"blue");
    //grd.addColorStop(1,"red");
    context.strokeStyle = "black";
    context.fillStyle = "tan";
    context.lineWidth = 3;
    context.arc(clockX,clockY,clockRadius,0,Math.TAU);
    context.stroke();
    context.fill();
    // Draw arms
    drawArm(h / 12, 3, 0.50, '#000000'); // Hour
    drawArm(m / 60, 2, 0.75, '#000000'); // Minute
    drawArm(s / 60, 1, 0.85, '#FFffff'); // Second
    // Add inner button
   ...