var DEG2RAD = Math.PI / 180;

function render_canvasclock() {
 var canvas = document.getElementById("canvasclock");
 var ctx = canvas.getContext("2d");
 var width = parseInt(canvas.getAttribute('width'));
 var height = parseInt(canvas.getAttribute('height'));
 var centerx = width/2;
 var centery = height/2;
 var clocksize = (width < height ? width: height) / 2 - 5;
 var clockcolor = "rgb(144,144,144)";
 ctx.clearRect(0,0,width,height);

 //ctx.arc(centerx,centery,clocksize,0,2*Math.PI, true);
 //ctx.stroke();

 for(deg=0;deg < 360;deg+=6) {
 var w = 1; var h = clocksize/10;
 if (deg % 30 == 0) { w = 2; h = clocksize*0.12; }
 ctx.save();
 ctx.translate(centerx,centery);
 ctx.rotate(deg * DEG2RAD);
 ctx.fillStyle = clockcolor;
 ctx.fillRect (0,clocksize*0.80,w,h);
 ctx.restore();
 }

 var t = new Date();
 var hours = t.getHours();
 var mins = t.getMinutes();
 var secs = t.getSeconds();
 
 // hour
 deg = 180 + hours*30 + mins/2;
 ctx.save();
 ctx.translate(centerx,centery);
 ctx.rotate(deg * DEG2RAD);
 ctx.fillStyle = clockcolor;
 ctx.fillRect (-2,-clocksize/10,4,clocksize*0.60);
 // embellishment on hour hand
 /* 
 // this version caused quirks in Opera
 ctx.arc(0,clocksize*0.40,5,0,2*Math.PI, true);
 ctx.fill();
 */
 ctx.translate(0,clocksize*0.25);
 ctx.rotate(45 * DEG2RAD);
 ctx.fillRect (0,0,8,8);
 ctx.fillStyle = "rgb(255,255,255)";
 ctx.fillRect (2,2,4,4);
 ctx.restore();

 // minute 
 deg = 180 + mins*6 + secs/10;
 ctx.save();
 ctx.translate(centerx,centery);
 ctx.rotate(deg * DEG2RAD);
 ctx.fillStyle = clockcolor;
 ctx.fillRect (-1,-clocksize/10,2,clocksize*0.85);
 ctx.restore();

 // second
 deg = 180 + secs*6;
 ctx.save();
 ctx.translate(centerx,centery);
 ctx.rotate(deg * DEG2RAD);
 ctx.fillStyle = clockcolor;
 ctx.fillRect (0,-clocksize/10,1,clocksize*0.85);
 ctx.restore();

 setTimeout("render_canvasclock()",100);

}