Libet Clock

by Sumoza

HTML

<canvas id="clock" width="400" height="400"></canvas>
    <canvas id="hand" width="400" height="400"></canvas>

CSS

#clock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-style: solid;
            border-color: green;
        }
        #hand {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgb(255, 255, 255, 0)
        }

JavaScript

var time = 0;
var rad_tick = (Math.PI*2)/2560; //radians per tick: last number is ms per revolution

// Draw Clock
const clock = document.getElementById('clock')
const clock_ctx = clock.getContext('2d')
clock_ctx.translate(clock.width/2, clock.height/2);
radius = (clock.height/2) * 0.7;

function drawNumbers(clock_ctx, radius) {
    var ang;
    var num;
    clock_ctx.font = radius * 0.15 + "px arial";
    clock_ctx.textBaseline = "middle";
    clock_ctx.textAlign = "center";
    for(num = 5; num < 61; num+=5){
      ang = num/5 * Math.PI / 6;
      clock_ctx.rotate(ang);
      clock_ctx.translate(0, -radius * 1.25); //inside clock so 85% radius
      clock_ctx.rotate(-ang);
      clock_ctx.fillText(num.toString(), 0, 0);
      clock_ctx.rotate(ang);
      clock_ctx.translate(0, radius * 1.25);
      clock_ctx.rotate(-ang);
    }
}

function drawClock() {
    clock_ctx.clearRect(-clock.width/2, -clock.height/2, clock.width, clock.height);
    clock.style.backgroundColor = 'transparent'; 
    clock_ctx.beginPath();
    clock_ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
    clock_ctx.stroke();
    drawNumbers(clock_ctx, radius);
}

drawClock();

// Draw Hand
const hand = document.getElementById('hand')
const hand_ctx = hand.getContext('2d')
hand_ctx.translate(hand.width/2, hand.height/2);

function drawHand(time){
    hand_ctx.clearRect(-hand.width/2, -hand.height/2, hand.width, hand.height);
    hand_ctx.beginPath();
    hand_ctx.moveTo(0,0);
    hand_ctx.rotate(time);
    hand_ctx.lineTo(0, -radius*0.9);
    hand_ctx.stroke();
    hand_ctx.rotate(-time);
}

function drawTime(){
    time+=rad_tick;//*10 fixes this?!
    drawHand(time)
}

var intervalId = setInterval(drawTime, 1);