HTML5 Game - Canvas Shape Clock

Using toDataURL() to print a canvas

Demo

<!DOCTYPE html>
   <head>
     <title>Clock</title>

      <style> 
         body {/*from   w  w w.  jav  a 2  s  .c  o m*/
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            border: thin solid #aaaaaa;
         }

         #snapshotImageElement {
            position: absolute;
            left: 10px;
            top: 1.5em;
            margin: 20px;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <div id='controls'>
      <input id='snapshotButton' type='button' value='Take snapshot'/>
    </div>

    <img id='snapshotImageElement'/>
    
    <canvas id='canvas' width='400' height='400'>
      Canvas not supported
    </canvas>

    <script>


let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    snapshotButton = document.getElementById('snapshotButton'),
    snapshotImageElement = document.getElementById('snapshotImageElement'),
    FONT_HEIGHT = 15,
    MARGIN = 35,
    HAND_TRUNCATION = canvas.width/25,
    HOUR_HAND_TRUNCATION = canvas.width/10,
    NUMERAL_SPACING = 20,
    RADIUS = canvas.width/2 - MARGIN,
    HAND_RADIUS = RADIUS + NUMERAL_SPACING,
    loop;

function drawNumerals() {
   let numerals = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
       angle = 0,
       numeralWidth = 0;

   numerals.forEach(function(numeral) {
      angle = Math.PI/6 * (numeral-3);
      numeralWidth = context.measureText(numeral).width;
      context.fillText(numeral, 
         canvas.width/2  + Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,
         canvas.height/2 + Math.sin(angle)*(HAND_RADIUS) + FONT_HEIGHT/3);
   });
}

function drawHand(loc, isHour) {
   let angle = (Math.PI*2) * (loc/60) - Math.PI/2,
       handRadius = isHour ? RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCATION 
                           : RADIUS-HAND_TRUNCATION;

   context.moveTo(canvas.width/2, canvas.height/2);
   context.lineTo(canvas.width/2  + Math.cos(angle)*handRadius, 
                  canvas.height/2 + Math.sin(angle)*handRadius);
   context.stroke();
}
function drawClock() {
   context.clearRect(0,0,canvas.width,canvas.height);

   context.save();

   context.fillStyle = 'white';
   context.fillRect(0, 0, canvas.width, canvas.height);

   //draw Circle
   context.beginPath();
   context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI*2, true);
   context.stroke();   
   
   //draw center
   context.beginPath();
   context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
   context.fill();

   //draw Hands
   let date = new Date;
   let hour = date.getHours();
   hour = hour > 12 ? hour - 12 : hour;
   drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);
   drawHand(date.getMinutes(), false, 0.5);
   drawHand(date.getSeconds(), false, 0.2);   

   context.restore();

   drawNumerals();
}

snapshotButton.onclick = function (e) {
   let dataUrl;

   if (snapshotButton.value === 'Take snapshot') {
      dataUrl = canvas.toDataURL();
      clearInterval(loop);
      snapshotImageElement.src = dataUrl;
      snapshotImageElement.style.display = 'inline';
      canvas.style.display = 'none';
      snapshotButton.value = 'Return to Canvas';
   }
   else {
      snapshotButton.value = 'Take snapshot';
      canvas.style.display = 'inline';
      snapshotImageElement.style.display = 'none';
      loop = setInterval(drawClock, 1000);
   }
};

context.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock, 1000);
      
    </script>
  </body>
</html>