1 function init(){

     2   clock();

     3   setInterval('clock()',1000);

     4 }

     5 function clock(){

     6   var now = new Date();

     7   var ctx = document.getElementById('tutorial').getContext('2d');

     8   ctx.save();

     9   ctx.clearRect(0,0,150,150);

    10   ctx.translate(75,75);

    11   ctx.scale(0.4,0.4);

    12   ctx.rotate(-Math.PI/2);

    13   ctx.strokeStyle = "black";

    14   ctx.fillStyle = "white";

    15   ctx.lineWidth = 8;

    16   ctx.lineCap = "round";

    17 

    18   // Hour marks

    19   ctx.save();

    20   ctx.beginPath();

    21   for (i=0;i<12;i++){

    22     ctx.rotate(Math.PI/6);

    23     ctx.moveTo(100,0);

    24     ctx.lineTo(120,0);

    25   }

    26   ctx.stroke();

    27   ctx.restore();

    28 

    29   // Minute marks

    30   ctx.save();

    31   ctx.lineWidth = 5;

    32   ctx.beginPath();

    33   for (i=0;i<60;i++){

    34     if (i%5!=0) {

    35       ctx.moveTo(117,0);

    36       ctx.lineTo(120,0);

    37     }

    38     ctx.rotate(Math.PI/30);

    39   }

    40   ctx.stroke();

    41   ctx.restore();

    42   

    43   var sec = now.getSeconds();

    44   var min = now.getMinutes();

    45   var hr  = now.getHours();

    46   hr = hr>=12 ? hr-12 : hr;

    47 

    48   ctx.fillStyle = "black";

    49 

    50   // write Hours

    51   ctx.save();

    52   ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )

    53   ctx.lineWidth = 14;

    54   ctx.beginPath();

    55   ctx.moveTo(-20,0);

    56   ctx.lineTo(80,0);

    57   ctx.stroke();

    58   ctx.restore();

    59 

    60   // write Minutes

    61   ctx.save();

    62   ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )

    63   ctx.lineWidth = 10;

    64   ctx.beginPath();

    65   ctx.moveTo(-28,0);

    66   ctx.lineTo(112,0);

    67   ctx.stroke();

    68   ctx.restore();

    69   

    70   // Write seconds

    71   ctx.save();

    72   ctx.rotate(sec * Math.PI/30);

    73   ctx.strokeStyle = "#D40000";

    74   ctx.fillStyle = "#D40000";

    75   ctx.lineWidth = 6;

    76   ctx.beginPath();

    77   ctx.moveTo(-30,0);

    78   ctx.lineTo(83,0);

    79   ctx.stroke();

    80   ctx.beginPath();

    81   ctx.arc(0,0,10,0,Math.PI*2,true);

    82   ctx.fill();

    83   ctx.beginPath();

    84   ctx.arc(95,0,10,0,Math.PI*2,true);

    85   ctx.stroke();

    86   ctx.fillStyle = "#555";

    87   ctx.arc(0,0,3,0,Math.PI*2,true);

    88   ctx.fill();

    89   ctx.restore();

    90 

    91   ctx.beginPath();

    92   ctx.lineWidth = 14;

    93   ctx.strokeStyle = '#325FA2';

    94   ctx.arc(0,0,142,0,Math.PI*2,true);

    95   ctx.stroke();

    96 

    97   ctx.restore();

    98 }

    99 init();