var canvas;
var g;
var theta;
var x, y, r;
var c1, c2, c3, c4;

function clock(col1, col2, col3, col4){
c1=col1;
c2=col2;
c3=col3;
c4=col4;
canvas=document.getElementById("can");
g=canvas.getContext("2d");
x=canvas.width/2;
y=canvas.height/2;
r=canvas.width/2-2;
setInterval(drawClock, 1000);
}

function drawClock(){
g.save();
g.clearRect(0,0, canvas.width, canvas.height);
g.translate(x,y);
g.font = "bold 20px arial";
g.textBaseline="middle";
g.textAlign="center";
g.fillStyle=c2;
for(var n=1;n<13;n++){
theta=n*Math.PI/6;
g.rotate(theta);
g.translate(0, -0.8*r);
g.rotate(-theta);
g.fillText(n.toString(), 0, 0);
g.rotate(theta);
g.translate(0, 0.8*r);
g.rotate(-theta);
}

showTime();
}

function showTime(){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
setHour(hour);
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
setMinute(minute);
second=(second*Math.PI/30);
setSecond(second);
}

function setHour(h){
g.save()
g.beginPath();
g.strokeStyle=c3;
g.lineWidth=5;
g.lineCap="round";
g.moveTo(0,0);
g.rotate(h);
g.lineTo(0, -0.45*r);
g.stroke();
g.restore();
}

function setMinute(m){
g.save();
g.beginPath();
g.strokeStyle=c3;
g.lineWidth=3;
g.lineCap="round";
g.moveTo(0,0);
g.rotate(m);
g.lineTo(0, -0.6*r);
g.stroke();
g.restore();
}

function setSecond(s){
g.save();
g.beginPath();
g.strokeStyle=c4;
g.lineWidth=1;
g.moveTo(0,0);
g.rotate(s);
g.lineTo(0, -0.7*r);
g.stroke();

g.beginPath();
g.fillStyle=c4;
g.arc(0, 0, r/12, 0, 6.2832);
g.fill();

g.restore();

g.restore();
}