function initCanvas(id){
  var canvas = document.getElementById(id);
  var ctx = canvas.getContext("2d");

  ctx.strokeStyle = '#00ffff';
  ctx.lineWidth = 17;
  ctx.shadowBlur= 15;
  ctx.shadowColor = '#00ffff'
  return ctx;
}
function degToRad(degree){
  var factor = Math.PI/180;
  return degree*factor;
}
function renderTime(ctx){
  var now = new Date();
  var today = now.toDateString();
  var time = now.toLocaleTimeString();
  var hrs = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();
  var mil = now.getMilliseconds();
  var smoothsec = sec+(mil/1000);
  var smoothmin = min+(smoothsec/60);

  //Background
  gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
  gradient.addColorStop(0, "#03303a");
  gradient.addColorStop(1, "black");
  ctx.fillStyle = gradient;
  //ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
  ctx.fillRect(0, 0, 500, 500);
  //Hours
  ctx.beginPath();
  ctx.arc(250,250,200, degToRad(270), degToRad((hrs*30)-90));
  ctx.stroke();
  //Minutes
  ctx.beginPath();
  ctx.arc(250,250,170, degToRad(270), degToRad((smoothmin*6)-90));
  ctx.stroke();
  //Seconds
  ctx.beginPath();
  ctx.arc(250,250,140, degToRad(270), degToRad((smoothsec*6)-90));
  ctx.stroke();
  //Date
  ctx.font = "25px Helvetica";
  ctx.fillStyle = 'rgba(00, 255, 255, 1)'
  ctx.fillText(today, 175, 250);
  //Time
  ctx.font = "25px Helvetica Bold";
  ctx.fillStyle = 'rgba(00, 255, 255, 1)';
  ctx.fillText(time+":"+mil, 175, 280);
}

const ctx1 = initCanvas('canvas');
const renderTime1 = renderTime.bind(this, ctx1);


function loop(){
  renderTime1();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);