Analog Clock for Diff TimeZone

by padma rubhan

HTML

<b>India</b><br>
<canvas id="canvas" width="200" height="200"></canvas><br>
<b>NewYork</b><br>
<canvas id="canvas1" width="200" height="200"></canvas><br>
<b>London</b><br>
<canvas id="canvas2" width="200" height="200"></canvas><br>
<b>japan</b><br>
<canvas id="canvas3" width="200" height="200"></canvas><br>
<b>China</b><br>
<canvas id="canvas4" width="200" height="200"></canvas><br>
<b>Moscow, Russia</b><br>
<canvas id="canvas5" width="200" height="200"></canvas><br>

JavaScript

setInterval(function(){
  showClock( "canvas","+5.5" ); /* Give Time Zone of the Country eg: Bombay - "+5.5"*/
  showClock( "canvas1","-5" );
  showClock( "canvas2","+1" );
  
  showClock( "canvas3","+9" );
  showClock( "canvas4","+8" );
  showClock( "canvas5","+3" );
}, 1000);

function showClock(canvasId, offset) {
  // DEFINE CANVAS AND ITS CONTEXT.
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext('2d');
  
  var offsetVal = offset || (new Date().getTimezoneOffset())/60;
 	var d = new Date();
  var utc = d.getTime() - (d.getTimezoneOffset() * 60000);
  var date = new Date(utc + (3600000*offsetVal));	
  
  var angle;
  var secHandLength = 60;

  // CLEAR EVERYTHING ON THE CANVAS. RE-DRAW NEW ELEMENTS EVERY SECOND.
  ctx.clearRect(0, 0, canvas.width, canvas.height);        

  OUTER_DIAL1();
  OUTER_DIAL2();
  CENTER_DIAL();
  MARK_THE_HOURS();
  MARK_THE_SECONDS();

  SHOW_SECONDS();
  SHOW_MINUTES();
  SHOW_HOURS();

  function OUTER_DIAL1() {
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 10, 0, Math.PI * 2);
    ctx.strokeStyle = '#92949C';
    ctx.stroke();
  }
  function OUTER_DIAL2() {
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 7, 0, Math.PI * 2);
    ctx.strokeStyle = '#929BAC';
    ctx.stroke();
  }
  function CENTER_DIAL() {
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 2, 0, Math.PI * 2);
    ctx.lineWidth = 3;
    ctx.fillStyle = '#353535';
    ctx.strokeStyle = '#0C3D4A';
    ctx.stroke();
  }

  function MARK_THE_HOURS() {

    for (var i = 0; i < 12; i++) {
      angle = (i - 3) * (Math.PI * 2) / 12;       // THE ANGLE TO MARK.
      ctx.lineWidth = 1;            // HAND WIDTH.
      ctx.beginPath();

      var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
      var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
      var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength -...