JSFiddle - React, Tailwind, and code Playground

by mvasko

HTML

<div id=clock">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #blue;">
Your browser does not support the HTML5 canvas tag.</canvas>

CSS

#myCanvas { 
background:url(http://www.deificink.com/app/download/7113660246/face.png);
    
}

JavaScript

//clock border
var img=document.getElementById("scream")
var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.beginPath();
	ctx.arc(250,250,250,0,2*Math.PI);
	ctx.stroke();
//Minute Hand
//hand 1
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(365,50);
	ctx.lineTo(250,250);
    ctx.stroke();

// hour hand 2
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(450,133);
	ctx.lineTo(250,250);
    ctx.stroke();

//hand 3
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(480,250);
	ctx.lineTo(250,250);
    ctx.stroke();
	
//hand 4
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(440,360);
	ctx.lineTo(250,250);
    ctx.stroke();
	
//hand 5
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(365,447);
	ctx.lineTo(250,250);
    ctx.stroke();
	
//hand 6
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(250,480);
	ctx.lineTo(250,250);
    ctx.stroke();
	
//hand 7
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(138,447);
	ctx.lineTo(250,250);
    ctx.stroke();
	
//hand 8
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(50,365);
	ctx.lineTo(250,250);
    ctx.stroke();
//hand 9
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(30,250);
	ctx.lineTo(250,250);
    ctx.stroke();
	
//hand 10
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(57,140);
	ctx.lineTo(250,250);
    ctx.stroke();

//hand 11
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(136,50);
	ctx.lineTo(250,250);
    ctx.stroke();
	
//hand 12
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.moveTo(250,30);
	ctx.lineTo(250,250);
    ctx.stroke();

//Hour Hand
//hand 1
	var...