JSFiddle - React, Tailwind, and code Playground

by Rajasekar Elango

HTML

<!DOCTYPE html>

<body>

<canvas id="canvas" width="900" height="900"
style="background-color:#333">
</canvas>
</body>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock1()
//drawClock2()

function drawClock1() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius, 1);
  
  drawNumbers(ctx, radius - 80, 7);
  drawNumbers(ctx, radius - 140, 6);
  drawNumbers(ctx, radius - 200, 5);
  drawNumbers(ctx, radius - 250, 4);
  drawNumbers(ctx, radius - 300, 3);
  drawNumbers(ctx, radius - 340, 2);
}

function drawClock2() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius, 1);
  drawNumbers(ctx, radius - 80, 12);
  drawNumbers(ctx, radius - 150, 11);
  drawNumbers(ctx, radius - 220, 10);
  drawNumbers(ctx, radius - 280, 9);
  drawNumbers(ctx, radius - 320, 8);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
//  ctx.strokeStyle = grad;
//  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius, skip) {
  var ang;
  var num;
  var text;
  if (skip > 9)
  	ctx.font = radius*0.10 + "px arial";
  else if (skip > 3 && skip < 8)
  	ctx.font = radius*0.11 + "px arial";
  else if (skip > 1)
  	ctx.font = radius*0.25 + "px arial";
  else
  	ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    text = num * skip;
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(text.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour...