JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<canvas id="clock" width="1140" height="900"></canvas>

JavaScript

const cavClock = document.getElementById('clock');

if (cavClock && cavClock.getContext('2d')) {
  let ctx = cavClock.getContext('2d');
  const centerX = cavClock.offsetWidth / 2;
  const centerY = cavClock.offsetHeight / 2;
  const smallRadius = 60;



  for (let i = 0; i < 12; i++) {
    let x = centerX + (450-70) * Math.cos(-30 * i * (Math.PI/180) + Math.PI/2);
    let y = centerY - (450-70) * Math.sin (-30 * i * (Math.PI/180) + Math.PI/2);
    ctx.beginPath();
    ctx.fillStyle = 'green';
    ctx.arc(x,y, smallRadius, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = 'black';
    ctx.font = '60px April';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(i + 1, x, y);
  }
}