JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="testCanvas" width="850" height="500"></canvas>

CSS

body { font: 30px sans-serif; }

JavaScript

var timerID;
var cW = 850; //canbasの幅
var cH = 500; //canbasの高さ
var centerY = cH / 2; //回転の中心点Y
// 分の設定
var minuteRadius = 180; //分半径の長さ
var minuteCenterX = 200;
//秒の設定
var secRadius = 180; //秒半径の長さ
var secCenterX = 610; //回転の中心点X
// 時間の設定
var hourRadius = 100;
var hourCenterX = minuteCenterX + 30;
// ミリ秒の設定
var startRadius = 10;

var angleSpeed = 6; //角度の速度
var millAngleSpeed = 12;
var hourAngleSpeed = 15; //角度の速度
var per = Math.PI;
var startAngle = 0; //開始角度
var angle = startAngle;
var objX;
var objY;
var maxAlpha = 1;//最大アルファ値
var defScall = 20; //オブジェクトのデフォルトサイズ
var canvas = document.getElementById('testCanvas');
var ctx = canvas.getContext('2d');

window.onload = function(){
    setTimer();
};
function setTimer(){
    clearInterval(timerID);
    timerID = setInterval("draw()", 10);
}

function draw(){

    var dNow = new Date();
    var sHour = dNow.getHours();
    var sMinute = dNow.getMinutes();
    var sSecond = dNow.getSeconds();
    var sMill = dNow.getMilliseconds();
    if (sHour < 10) 
        sHour = "0" + sHour;
    if (sMinute < 10) 
        sMinute = "0" + sMinute;
    if (sSecond < 10) 
        sSecond = "0" + sSecond;
  if (sMill < 10) 
        sMill = "0" + sMill;
    
    ctx.clearRect(0, 0, cW, cH);
    ctx.fillStyle = '#333';
    ctx.beginPath();
    sNow = sHour + ":" + sMinute + ":" + sSecond;
    ctx.font = "22pt Arial";
    ctx.fillText(":", secCenterX - secRadius - 22, centerY + 4);
    ctx.fillText(":", minuteCenterX + minuteRadius - 22, centerY + 4);
  ctx.fillText(":", secCenterX - secRadius + 28, centerY + 4);
  drawMillSec("" + sMill);
    drawSecond(sSecond);
    drawMinute(sMinute);
    drawHour(sHour);
    ctx.closePath();
}

function drawMillSec(mill){
    var radius = startRadius;
    mill = mill.substring(0, 2);
    //一番はじめの数字
    start = mill - 1;
    var adjustX = 0;
    if (start < 0) 
        start = 99;
    for (var i = 0; i < 100; i++) {
        ctx.font = "8pt Arial";
        if (i == 99) {
            adjustX = -10;
...