<canvas id="clock"></canvas>

body {
  font-family: "Raleway", Arial, sans-serif;
}

#clock {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%,-50%);
  border-radius: 5%;
}

/*Adaptation of w3 school's Canvas Clock Lesson: https://www.w3schools.com/graphics/canvas_clock.asp*/

//---INITIATION---//

var canvas = document.getElementById("clock");
var ctx = canvas.getContext("2d");
setInterval(drawClock, 1000); //runs drawClock every second (1000 miliseconds)

//---FUNCTIONS---//

function drawClock() {
  canvas.style.background = "#222222";
  sizeToWindow(ctx);
  drawFace(ctx, face_radius);
  drawMeridiem(ctx,face_radius);
  drawNumbers(ctx, face_radius);
  setTime(ctx, face_radius);
}

function sizeToWindow(ctx) {
  if (window.innerWidth > window.innerHeight) {
    canvas.height = window.innerHeight*.8
    canvas.width = canvas.height
  } else {
    canvas.width = window.innerWidth*.8
    canvas.height = canvas.width
  }
  ctx.translate(canvas.width/2, canvas.height/2);
  face_radius = canvas.height*.45;
}

function drawFace(ctx, face_radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, face_radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.beginPath();
  ctx.arc(0, 0, face_radius*0.075, 0, 2*Math.PI);
  ctx.fillStyle = '#333333';
  ctx.fill();
}

function drawMeridiem(ctx, face_radius) {
  // am/pm
  var meridiem = new Date().getHours() <= 11 ? "AM" : "PM"
  ctx.font = face_radius*.08 + "px 'Raleway', Arial, sans-serif";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  ctx.fillStyle = "#333333";
  ctx.fillText(meridiem, 0, face_radius*.4);
  // box
  ctx.lineWidth=face_radius*.005;
  ctx.strokeStyle="#333333";
  ctx.strokeRect(face_radius*-.08,face_radius*.34,face_radius*.16,face_radius*.115)
}

function drawNumbers(ctx, face_radius) {
  var ang;
  var num;
  ctx.font = face_radius*.12 + "px 'Raleway', Arial, sans-serif";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = .2; num <= 12; num += .2){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -face_radius*0.85);
    ctx.rotate(-ang);
    if (num.toFixed(1) % 1 === 0) {
      ctx.fillStyle = "#222222";
      ctx.fillText(num.toFixed().toString(), 0, 0);
    } else {
      ctx.beginPath();
      ctx.arc(0, 0, face_radius*0.005, 0, 2*Math.PI);
      ctx.fillStyle = "#999999";
      ctx.fill();
    }
    ctx.rotate(ang);
    ctx.translate(0, face_radius*0.85);
    ctx.rotate(-ang);
  }  
}

function drawHand(ctx, pos, length, width, color) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.strokeStyle=color;
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

function setTime(ctx, face_radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    ctx.lineCap="round";
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, face_radius*0.5, face_radius*0.075, "#333333");
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, face_radius*0.65, face_radius*0.065, "#333333");
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, face_radius*0.85, face_radius*0.02, "red");
    ctx.beginPath();
    ctx.arc(0, 0, face_radius*0.03, 0, 2*Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
}