<body>
    
<!--Below div not used for this pen but is an alternate display method for text as explained in the JS:

<div id="time"></div> 

***********************
* outer pie = seconds
* middle pie = minutes
* inner pie = hours
**********************
!-->
    
<canvas id="canv" width="500" height="500"></canvas>
</body>
@import url(https://fonts.googleapis.com/css?family=Noto+Serif:700);
body{
	margin: 0;
	background: hsla(180, 95%, 15%, 1);
	font-family: 'Noto Serif', serif;
	font-size: 4em;
  overflow:hidden;
  width:100%;
  
}

canvas {
	left: 50%;
	position: absolute;
	top :50%;
	transform :translate( -50%, -50% );
}

/* #time font styling if using a div instead of canvas to display text

#time{
	position: absolute;
  margin-left:40vw;
  margin-top:5%;
	top: 0;
	left: 0;
	width: 500px;
  color:hsla(255,255%,255%,0.7);
  font-weight:bold;
	text-align: center;
	line-height: 500px;
   z-index:1;
  text-shadow:hsla(180, 85%, 5%, 1) 1px 1px,
    hsla(180, 85%, 5%, .6) 2px 2px,
    hsla(180, 85%, 5%, .6) 3px 3px,
    hsla(180, 85%, 5%, .6) 4px 4px,
    hsla(180, 85%, 5%, .6) 5px 5px,
    hsla(180, 85%, 5%, .6) 6px 6px,
    hsla(180, 85%, 5%, .6) 7px 7px,
    hsla(180, 85%, 5%, .6) 8px 8px,
    hsla(180, 85%, 5%, .6) 9px 9px,
    hsla(180, 85%, 5%, .6) 11px 11px,
    hsla(180, 85%, 5%, .6) 12px 12px,
    hsla(180, 85%, 5%, .6) 13px 13px,
    hsla(180, 85%, 5%, .6) 14px 14px,
    hsla(180, 85%, 5%, .6) 15px 15px,
    hsla(180, 85%, 5%, .6) 16px 16px,
    hsla(180, 85%, 5%, .6) 17px 17px,
    hsla(180, 85%, 5%, .6) 18px 18px,
    hsla(180, 85%, 5%, .6) 19px 19px,
    hsla(180, 85%, 5%, .6) 20px 20px,
    hsla(180, 85%, 5%, .6) 21px 21px,
    hsla(180, 85%, 5%, .6) 22px 22px,
    hsla(180, 85%, 5%, .6) 23px 23px,
    hsla(180, 85%, 5%, .6) 24px 24px,
    hsla(180, 85%, 5%, .6) 25px 25px,
    hsla(180, 85%, 5%, .6) 26px 26px,
    hsla(180, 85%, 5%, .6) 27px 27px,
    hsla(180, 85%, 5%, .6) 28px 28px,
    hsla(180, 85%, 5%, .6) 29px 29px,
    hsla(180, 85%, 5%, .6) 30px 30px;
  
}
*/
var c = document.getElementById('canv');
var $ = c.getContext('2d'); 
var ang = 0;
var secondsColor = 'hsla(180, 85%, 5%, .7)';
var minutesColor = 'hsla(180, 95%, 15%, 1)';
var hoursColor = 'hsla(180, 75%, 25%, 1)';
var currentHr;
var currentMin;
var currentSec;
var currentMillisec; 
var t = setInterval( 'updateTime()', 50 );

function updateTime(){
	var currentDate = new Date();
	var g = $.createRadialGradient(250,250,.5,250,250,250);  
  g.addColorStop(0, 'hsla(180, 55%, 8%, 1)');  
  g.addColorStop(1, 'hsla(180, 95%, 15%, 1)');  
	$.fillStyle = g;
	$.fillRect( 0, 0, c.width, c.height );
	currentSec = currentDate.getSeconds();
	currentMillisec = currentDate.getMilliseconds();
	currentMin = currentDate.getMinutes();
	currentHr = currentDate.getHours();
	if(currentHr == 00){  //if midnight (00 hours) hour = 12
    currentHr=12;
  }
  else if (currentHr >= 13 ){  //convert military hours at and over 1300 (1pm) to regular hours by subtracting 12. 
    currentHr -=12;
  }
	drawSeconds();
	drawMinutes();
	drawHours();
	var realTime = currentHr + ':' + numPad0( currentMin ) + ':' + numPad0( currentSec );
  
  /*Here is the selected option of creating the text within the pie canvas elemenet */
  
	var textPosX = 250 - ( $.measureText(realTime).width / 2 );
  $.shadowColor = 'hsla(180, 100%, 5%, 1)';
  $.shadowBlur = 100;
  $.shadowOffsetX = 12;
  $.shadowOffsetY = 0;
	$.fillStyle =  'hsla(255,255%,255%,.7)';
	$.font = "bold 1.6em 'Noto Serif', serif";
	$.fillText( realTime, textPosX, c.height/2+50);
   
  /* OR using a div to display the time (#time) where I pre-styled text with a long shadow using css...can't decide which I like better - but since this is a canvas demo....; (comment out the above text settings and uncomment the below) 
  
	document.getElementById('time').innerHTML = realTime;
  */
}

function drawSeconds(){  
	ang = 0.006 * ( ( currentSec * 1000 ) + currentMillisec );
	$.fillStyle = secondsColor;
	$.beginPath();
	$.moveTo( 250, 250 ); 
	$.lineTo( 250, 50 );
	$.arc( 250, 250, 200, calcDeg( 0 ), calcDeg( ang ), false );
	$.lineTo( 250, 250 );
  $.shadowColor = 'hsla(180, 45%, 5%, .4)';
  $.shadowBlur =15;
  $.shadowOffsetX = 15;
  $.shadowOffsetY = 15;
	$.fill();
} 

function drawMinutes(){  
	ang = 0.0001 * ( ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
	$.fillStyle = minutesColor;
	$.beginPath();
	$.moveTo( 250, 250 ); 
	$.lineTo( 250, 100 );
	$.arc( 250, 250, 150, calcDeg( 0 ), calcDeg( ang ), false );
	$.lineTo( 250, 250 );
  $.shadowColor = 'hsla(180, 25%, 5%, .4)';
  $.shadowBlur =15;
  $.shadowOffsetX = 15;
  $.shadowOffsetY = 15;
	$.fill();
}  

function drawHours(){  
	ang = 0.000008333 * ( ( currentHr * 60 * 60 * 1000 ) + ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
	if( ang > 360 ){
		ang -= 360;
	}
	$.fillStyle = hoursColor;
	$.beginPath();
	$.moveTo( 250, 250 ); 
	$.lineTo( 250, 150 );
	$.arc( 250, 250, 100, calcDeg( 0 ), calcDeg( ang ), false );
	$.lineTo( 250, 250 );
  $.shadowColor = 'hsla(180, 45%, 5%, .4)';
  $.shadowBlur =15;
  $.shadowOffsetX = 15;
  $.shadowOffsetY = 15;
	$.fill();
}  


function calcDeg( deg ){
	return (Math.PI/180) * (deg - 90);
}
//handle zeros for minutes and seconds
function numPad0( str ){
	var cStr = str.toString();
	if( cStr.length < 2 ){
		 str = 0 + cStr;
	}
	return str;
}
window.addEventListener('resize', function(){
  c.width = 500;
  c.height = 500;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js