JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200" height="200">
</canvas>

JavaScript

var colorArr = ["white","white","white","white","white","purple","darkblue","lightblue","green","yellow","orange","red"];
var Q = 0;
drawClock();

function drawClock(){
	var c = document.getElementById("canvas");
  var pi = Math.PI;
  var h = pi*2/12;
  var startArc = -0.5*pi;
  var endArc = 1.5*pi;
  var r = 150 ;
  var rWord = 120;
  var cX = 150;
  var cY = 150;
  var lenColor = colorArr.length;
  c.width = 500;
  c.height = 500;
  var ctx = c.getContext("2d");
  ctx.font= "1.5em Verdana";
  ctx.beginPath();
  ctx.fillStyle="Yellow";
  ctx.arc(r,r,r,startArc,endArc);
  ctx.stroke();
  var x = 0 ;
  var y = 0 ;
  for(i = Q ; i<=Q+12 ; i++){
    var xi =i%12==0 ? 12 : i %12;
  	var metrics = ctx.measureText(xi);
    var aW =metrics.width;
	  var fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
		var aH = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

		ctx.beginPath();
  	x = Math.cos(startArc+h*i)*rWord+cX; 
    y = Math.sin(startArc+h*i)*rWord+cY; 
    ctx.fillStyle = colorArr[(i-1-Q)%12];
    ctx.arc(x,y,20,startArc,endArc);
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle="black";
    ctx.fillText(xi,x-aW/2,y+aH/2);
  }  
  Q=Q<11?Q+1:0;
  setTimeout(drawClock,1000);
};