clock.ts

const timeEl = document.createElement('div');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

const size = 300;
const r = (size / 2) * 0.9;

canvas.style.border = '1px solid gray';
canvas.width = size;
canvas.height = size;

document.body.appendChild(timeEl);
document.body.appendChild(canvas);

// Start
ctx.translate(Math.floor(size / 2), Math.floor(size / 2));
drawClock();

setInterval(() => {
  drawClock();
}, 1000);

function updateTimeElement() {
  const date = new Date();
  const pad = (n: number) => n.toString().padStart(2, '0');

  timeEl.innerHTML = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
    date.getSeconds()
  )}`;
}

function drawClock() {
  updateTimeElement();
  drawFace();
  drawNumbers();
  drawTime();
}

function drawFace() {
  ctx.beginPath();
  ctx.arc(0, 0, r, 0, 2 * Math.PI);
  ctx.strokeStyle = 'gray';
  ctx.fillStyle = 'lightgray';
  ctx.lineWidth = 5;
  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(0, 0, r * 0.075, 0, 2 * Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
}

function drawNumbers() {
  const distance = r * 0.85;

  ctx.font = r * 0.15 + 'px arial';
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'center';
  ctx.strokeStyle = 'black';
  ctx.fillStyle = '#333';

  for (let i = 1; i <= 12; i++) {
    const ang = (i * Math.PI) / 6;

    ctx.rotate(ang);
    ctx.translate(0, -distance);
    ctx.rotate(-ang);

    ctx.fillText(i.toString(), 0, 0);

    ctx.rotate(ang);
    ctx.translate(0, distance);
    ctx.rotate(-ang);
  }
}

function drawHand(angle: number, length: number, width: number) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = 'round';
  ctx.moveTo(0, 0);
  ctx.rotate(angle);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-angle);
}

function drawTime() {
  const now = new Date();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();

  const hourAngle =
    ((hour % 12) * Math.PI) / 6 +
    (minute * Math.PI) / (6 * 60) +
    (second * Math.PI) / (360 * 60);
  drawHand(hourAngle, r * 0.5, r * 0.05);

  const minuteAngle = (minute * Math.PI) / 30 + (second * Math.PI) / (30 * 60);
  drawHand(minuteAngle, r * 0.75, r * 0.05);

  const secondAngle = (second * Math.PI) / 30;
  drawHand(secondAngle, r * 0.75, r * 0.025);
}