$(function(){
  clock();
  setInterval(clock, 1000);
});
function clock() {
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr = now.getHours();
  var ctx = document
  .getElementById("canvas")
  .getContext("2d");
  ctx.save();
  ctx.clearRect(0,0,80,80);
  ctx.translate(40,40);
  ctx.scale(0.2,0.2);
  ctx.rotate(-Math.PI/2);
  ctx.save();
  ctx.fillStyle = "#4b4c8c";
  ctx.fillRect(-142,-142,142*2,142*2);
  ctx.fill();
  ctx.restore();
  ctx.strokeStyle = "#ffffff";
  ctx.fillStyle = "#ffffff";
  ctx.lineWidth = 8;
  ctx.lineCap = "round";
  ctx.strokeStyle = "#979dd1";
  ctx.fillStyle = "#979dd1";
  ctx.save();
  ctx.beginPath();
  for(var i = 0; i < 12; i++) {
    ctx.rotate(Math.PI/6);
    ctx.moveTo(100,0);
    ctx.lineTo(120,0);
  }
  ctx.stroke();
  ctx.restore();
  ctx.strokeStyle = "#ffffff";
  ctx.fillStyle = "#ffffff";
  ctx.save();
  ctx.rotate((Math.PI/6)*hr +
             (Math.PI/360)*min +
             (Math.PI/21600)*sec);
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-20,0);
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();
  ctx.save();
  ctx.rotate((Math.PI/30)*min +
             (Math.PI/1800)*sec);
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-28,0);
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();
  ctx.save();
  ctx.rotate(sec * Math.PI/30);
  ctx.strokeStyle = "#ffffff";
  ctx.fillStyle = "#ffffff";
  ctx.lineWidth = 4;
  ctx.beginPath();
  ctx.moveTo(-30,0);
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.restore();
  ctx.save();
  ctx.lineWidth = 20;
  ctx.strokeStyle = "#bedaef";
  ctx.beginPath();
  ctx.rect(-142,-142,142*2,142*2);
  ctx.stroke();
  ctx.restore();
  ctx.restore();
}