JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<canvas height="160" width="160" id="can" ></canvas>
<img src='' id='img_id' />

CSS

img{
    border:none;
}
#img_id{
    height:80px;
    width:80px;
}

JavaScript

var j = 10;
function showTimer(can_id,time){
    can_id = can_id == undefined ? 'can' : can_id;
    time = time == undefined ? (j--) : time;
    if(time < 0) return false;
	var can = document.getElementById(can_id);
	var cxt = can.getContext("2d");
	var deg = 0.017453292519943295;
	var st_angle = 3*Math.PI/2;
	cxt.clearRect(0,0,can.width,can.height);
	cxt.beginPath();
	cxt.fillStyle="rgb(225, 229, 232)";
	cxt.arc(80,80,80,0,2*Math.PI,true);
	cxt.fill();

	cxt.beginPath();
	cxt.fillStyle="rgb(255, 255, 255)";
	cxt.arc(80,80,44,0,Math.PI*2,true);
	cxt.fill();
	
	cxt.beginPath();
	cxt.strokeStyle = "rgba(0,0,0,0.2)";
	cxt.fillStyle="rgb(255, 255, 255)";
	cxt.arc(80,80,40,0,Math.PI*2,true);
	cxt.stroke();
	
	cxt.beginPath();
    cxt.translate(80,80);
	cxt.moveTo(80,80);
	cxt.fillStyle="rgba(0,0,0,1)";
	cxt.font = "28pt Helvetica";
	var end_angle = st_angle + ((Math.PI/30) * time);

	cxt.fillStyle="rgb(127, 194, 65)";
	cxt.moveTo(0,0);
	cxt.arc(0,0,76,st_angle,end_angle,false);
	cxt.globalCompositeOperation = "darker";
	cxt.fill();
    
    cxt.strokeStyle = "rgba(0,0,0,0.8)";
    cxt.beginPath();
    cxt.strokeStyle = 'black';
	for(var i=0;i<60;i++){
		if((i%5 == 0)&&(i%15 != 0)){
			cxt.lineWidth = "1.5";
			cxt.moveTo(64,0);
			cxt.lineTo(72,0);
		} else if(i%15 == 0){
			cxt.lineWidth = "3";
			cxt.moveTo(60,0);
			cxt.lineTo(76,0);
		} else {
			cxt.lineWidth = "1";
			cxt.moveTo(68,0);
			cxt.lineTo(72,0);
		}
		cxt.rotate(Math.PI/30);
	}
	cxt.stroke();
    
	cxt.fillStyle="rgb(255, 255, 255)";
    cxt.moveTo(0,0);
	cxt.arc(0,0,36,0,2*Math.PI,true);
	cxt.globalCompositeOperation = "source-over";
	cxt.fill();
	cxt.fillStyle="rgb(0, 0, 0)";
	cxt.fillText(parseInt(time),-20,12);
    cxt.translate(-80,-80);
    document.getElementById('img_id').src = can.toDataURL();
}
setInterval(showTimer,1000);
//showTimer('can',23);