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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");var d = new Date();
var n = d.getHours();
console.log(n);
if(n==15){
	ctx.moveTo(480,250);
	ctx.lineTo(250,250);
    ctx.stroke();
}else if(n==16){
    ctx.moveTo(440,360);
	ctx.lineTo(250,250);
    ctx.stroke();
}else if(n==17){
    ctx.moveTo(365,447);
	ctx.lineTo(250,250);
    ctx.stroke();
}else if(n==20){
    ctx.moveTo(50,365);
	ctx.lineTo(250,250);
    ctx.stroke();
}