THE WORLD'S LARGEST WEB DEVELOPER SITE
×

## Canvas Tutorial

Canvas Home Canvas Drawing Canvas Coordinates Canvas Gradients Canvas Text Canvas Images

## Canvas Clock

Clock Intro Clock Face Clock Numbers Clock Hands Clock Start

Canvas Reference

# Canvas Clock Numbers

## Part III - Draw Clock Numbers

The clock needs numbers. Create a JavaScript function to draw clock numbers:

### JavaScript:

function drawClock() {
}

var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num= 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.rotate(-ang);
}
}
Try it Yourself »

## Example Explained

Set the font size (of the drawing object) to 15% of the radius:

ctx.font = radius*0.15 + "px arial";

Set the text alignment to the middle and the center of the print position:

ctx.textBaseline="middle";
ctx.textAlign="center";

Calculate the print position (for 12 numbers) to 85% of the radius, rotated (PI/6) for each number:

for(num= 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);