var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

ctx.font=18*rem+'px Aprial';

ctx.textAlign='center';

ctx.textBaseline='middle';

hourNumbers.forEach(function(number,i){

var rad=2*Math.PI/12*i;

var x=Math.cos(rad)*(r-30*rem);

var y=Math.sin(rad)*(r-30*rem);

ctx.fillText(number,x,y);

});

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

var rad=2*Math.PI/60*i;

var x=Math.cos(rad)*(r-18*rem);

var y=Math.cos(rad)*(r-18*rem);

ctx.beginPath();

if(i%5==0)

{ctx.fillStyle='#000';

ctx.arc(x,y,2*rem,0,2*Math.PI,false);

ctx.fill();

}

else{

ctx.fillStyle='#ccc';

ctx.arc(x,y,2*rem,0,2*Math.PI,false);

ctx.fill();

}

ctx.fill();

}

}