<!DOCTYPE html>
<html>
<head>
	<style>

		#canvas {
			border-radius: 100%;
		}

	</style>
</head>
<body>

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

  <script>
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext("2d");
		ctx.shadowBlur = "15"
		ctx.lineWidth = 20;
		ctx.font = "20px Arial bold";

		function getDeg(time) {
		  return Math.PI * 2 / 360 * time;
		}
		function updateCanvas() {

		  ctx.fillStyle = "black";
		  ctx.fillRect(0,0,500,500);

		  var now = new Date();
		  var milliseconds = now.getMilliseconds();
		  var seconds = now.getSeconds();
		  var minutes = now.getMinutes();
		  var hours = now.getHours();
		  var secAndMS = seconds + (milliseconds/1000);
		  var minAndSec = minutes + (seconds/60);
		  var hourAndMin = hours + (minutes/60);

		  ctx.shadowColor = "white";
		  ctx.strokeStyle = "white";
		  ctx.fillStyle = "white";
		  ctx.beginPath();
		  ctx.arc(250,250,100,getDeg(milliseconds * 0.36 -180),getDeg(milliseconds * 0.36 -90));
		  ctx.stroke();

		  ctx.shadowColor = "#28d1fa";
		  ctx.strokeStyle = "#28d1fa";
		  ctx.fillStyle = "#28d1fa";
		  ctx.fillText("Seconds: " + seconds, 195, 230);
		  ctx.beginPath();
		  ctx.arc(250,250,140,getDeg(270),getDeg(secAndMS * 6 -90));
		  ctx.stroke();

		  ctx.shadowColor = "#FF33CC";
		  ctx.strokeStyle = "#FF33CC";
		  ctx.fillStyle = "#FF33CC";
		  ctx.fillText("Minutes: " + minutes, 195, 260);
		  ctx.beginPath();
		  ctx.arc(250,250,180,getDeg(270),getDeg(minAndSec * 6 - 90));
		  ctx.stroke();

		  ctx.shadowColor = "#33FF33";
		  ctx.strokeStyle = "#33FF33";
		  ctx.fillStyle = "#33FF33";
		  ctx.fillText("Hours: " + hours, 195, 290);
		  ctx.beginPath();
		  ctx.arc(250,250,220,getDeg(270),getDeg(hourAndMin * 15 - 90));
		  ctx.stroke();

		}

		setInterval(updateCanvas, 20);
  </script>
</body>
</html>