JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='world' width="400" height="400"></canvas>

JavaScript

init();

function init(){
    drawHands();
    setInterval('drawHands()',1000);
}

function drawHands(){
    var canvas = document.getElementById('world');
    var ctx = canvas.getContext('2d');
    
    var x=200;
    var y=200;
    var r=x*0.95;

    var d = new Date();
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();
    
    ctx.clearRect(0,0,400,400);
    
    //draw background
    ctx.save();
    ctx.translate(x,y);
    var grad = ctx.createLinearGradient(-r,r,r,-r);
   // grad.addColorStop(0,'rgb(128,128,128)');
    grad.addColorStop(0.5,'rgb(255,255,255)');
    grad.addColorStop(1,'rgb(128,128,128)');
    ctx.beginPath();
    ctx.fillStyle = grad;
    ctx.arc(0,0,r,0,Math.PI*2,false);
    ctx.fill();
    
    grad = ctx.createLinearGradient(-r,-r,r,r);
    grad.addColorStop(0,'rgb(128,128,128)');
    grad.addColorStop(0.5,'rgb(255,255,255)');
    grad.addColorStop(1,'rgb(128,128,128)');
    ctx.beginPath();
    ctx.fillStyle = grad;
    ctx.arc(0,0,r*0.85,0,Math.PI*2,false);
    ctx.fill();
    
    ctx.beginPath();
    ctx.fillStyle = '#16b';
    ctx.arc(0,0,r*0.8,0,Math.PI*2,false);
    ctx.fill();
    
    ctx.beginPath();
    ctx.fillStyle = '#05a';
    ctx.arc(0,0,r*0.4,0,Math.PI*2,false);
    ctx.fill();
    ctx.restore();
    
    //draw index
    ctx.save();
    ctx.translate(x,y);
    ctx.fillStyle = 'white';
    for(var i=0;i<12;i++){
        ctx.rotate(Math.PI/6);
        ctx.fillRect(-r*0.04/2,-r*0.75,r*0.04,r*0.2);        
    }
    ctx.restore();
    
    //draw text
    ctx.save();
    ctx.translate(x,y);
    ctx.fillStyle = 'black';
    ctx.font = (r*0.45/5)+"px serif";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('TIMEpunch',0,r*0.45);
    ctx.restore();
    
    //draw hour hand
    ctx.save();
    ctx.translate(x,y);
    ctx.beginPath();
    ctx.rotate((h/12+m/12/60)*2*Math.PI);
    ctx.strokeStyle = 'white';
    ctx.lineWidth = r*0.02;
    ctx.moveTo(0,0);
   ...