Dial of Clock

Clock Using Canvas DEMO : Arc of Clock Add Second Minutes Hour Border

HTML

<canvas id="my_canvas" width="500" height="400"  style="border:1px solid #000000;"></canvas>

JQUERY

<script>
$(document).ready(function() {
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var angle_jump=6;
var r=160;
var x=my_canvas.width/2;
var y=my_canvas.height/2;
speed=1000;

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

gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);

for(j=0;j<360;j += angle_jump){
j_radian=j*(Math.PI/180);
gctx.beginPath()
if((j % (5*angle_jump))==0){
var y1_out=y+ 1.1*r*Math.sin(j_radian);
var x1_out=x+ 1.1*r*Math.cos(j_radian);
}else{
var y1_out=y+ 1.15*r*Math.sin(j_radian);
var x1_out=x+ 1.15*r*Math.cos(j_radian);
}

var y2_out=y+ 1.2*r*Math.sin(j_radian);
var x2_out=x+ 1.2*r*Math.cos(j_radian);

gctx.moveTo(x1_out,y1_out);
gctx.lineTo(x2_out,y2_out);
gctx.stroke();
}
}
////////
my_function();
})
</script>