Speed is kept high to understand the relation.

One rotation of second needle will shift minute needle by 6 degree or 1 minute.

One rotation of minute needle will shift hour needle by 6 degree or 1 hour .

HTML

``<canvas id="my_canvas" width="520" height="510"  ></canvas>``

JQUERY

``````<script>

var my_canvas=\$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var ang_second=90;
var ang_minute=90;
var ang_hour=90;
var angle_jump=6;
var r=160;
var x=my_canvas.width/2;
var y=my_canvas.height/2;
speed=10;

arc_angle=10;// angle of oppisite end of second niddle

////////////
my_function=function my_function(){

gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
///////////////////
gctx.moveTo(x+r*1.4,y);
gctx.strokeStyle= '#d28c23';
gctx.lineWidth=30;

gctx.arc(x,y,r*1.4,0,2*Math.PI);
gctx.stroke(); ///Outer circle
////////////////////
gctx.lineWidth=1;

///////////////////////
var h=10; // to show minutes
var h=2;
var x_gap=-5;
var y_gap=5;
for(j=0;j<360;j += angle_jump){

gctx.beginPath()
gctx.strokeStyle= '#464623';
if((j % (5*angle_jump))==0){

if(h<12){
h=h+1; // to show hour
}else{
h=1;
}

gctx.font = '36px serif';
if(y_gap<15){y_gap=y_gap+1;}
x_gap=x_gap-1;
void gctx.fillText(h,x1_text+x_gap, y1_text+y_gap);
}else{
}

gctx.moveTo(x1_out,y1_out);
gctx.lineTo(x2_out,y2_out);
gctx.stroke();
}

///////////hour Needle//////////
gctx.beginPath()
gctx.strokeStyle= '#f52300'; // border color of the hour needle
var startAngle=(1/180) * (360-ang_hour); // In degree
var a_end_ang=(1/180) * (360-(ang_hour + 180 -arc_angle));
var a_start_ang=(1/180) *(360-(ang_hour + 180 + arc_angle));

var y1=y+ 0.8*r*Math.sin(startAngle*Math.PI);
var x1=x+ 0.8*r*Math.cos(startAngle*Math.PI);

gctx.moveTo(x1,y1); // Coordinate of tip of the needle
gctx.arc(x,y,0.3*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1); // Full hour needle path
gctx.fillStyle = '#f52300'; // fill colour of the hour  needle
gctx.fill();
gctx.stroke(); // draw the hour needle
//////////////////////////////////
///////////Minute Needle//////////
gctx.beginPath()
gctx.strokeStyle= '#f5d200'; // border color of the minute needle
var startAngle=(1/180) * (360-ang_minute); // In degree
var a_end_ang=(1/180) * (360-(ang_minute + 180 -arc_angle));
var a_start_ang=(1/180) *(360-(ang_minute + 180 + arc_angle));

var y1=y+ 0.9*r*Math.sin(startAngle*Math.PI);
var x1=x+ 0.9*r*Math.cos(startAngle*Math.PI);

gctx.moveTo(x1,y1); // Coordinate of tip of the needle
gctx.arc(x,y,0.3*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1); // Full minute needle path
gctx.fillStyle = '#f5d200'; // fill colour of the minute needle
gctx.fill();
gctx.stroke(); // draw the minute needle
///////////////////////////////////////////////////////
gctx.beginPath()
gctx.strokeStyle= '#46d2f5'; // border color of the second needle
var startAngle=(1/180) * (360-ang_second); // In degree
var a_end_ang=(1/180) * (360-(ang_second + 180 -arc_angle));
var a_start_ang=(1/180) *(360-(ang_second + 180 + arc_angle));

var y1=y+ r*Math.sin(startAngle*Math.PI);
var x1=x+ r*Math.cos(startAngle*Math.PI);

gctx.moveTo(x1,y1); // Coordinate of tip of the needle
gctx.arc(x,y,0.3*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1); // Full second needle path
gctx.fillStyle = '#46d2f5'; // fill colour of the second needle
gctx.fill();
gctx.stroke(); // draw the second needle
//////////////////////////////////

/// small Circle at center of the clock
gctx.beginPath()
gctx.strokeStyle= '#000000';
gctx.arc(x,y,3,0,2*Math.PI);
gctx.fillStyle = '#ff00ff';
gctx.fill();
gctx.stroke();
my_function2();
}
////////

my_function2=function my_function2(){
if(ang_second > -264){
ang_second=ang_second-angle_jump;
my_time=setTimeout('my_function()',speed)
//\$('#d1').html("ang_second: " + ang_second + "<br>ang_minute" + ang_minute +
"<br>ang_hour" + ang_hour);
}else{
ang_second=90;

if(ang_minute > -264){
ang_minute=ang_minute - angle_jump;
}else{
ang_minute=90;
ang_hour=ang_hour-angle_jump;
}
my_time=setTimeout('my_function()',speed)
}
}
/////////
my_function();
})
</script>``````