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

In these chapters we will build an analog clock using HTML canvas.

## Part I - Create the Canvas

The clock needs an HTML container. Create an 300 x 300 pixel HTML canvas:

### HTML code:

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();

function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
</script>

</body>
</html>
Try it Yourself »

## Code Explained

Add an HTML <canvas> element to your page:

<canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas>

Create a canvas object (var canvas) from the HTML canvas element:

var canvas = document.getElementById("canvas");

Create a 2d drawing object (var ctx) for the canvas object:

var ctx = canvas.getContext("2d");

Calculate the clock radius, using the height of the canvas:

var radius = canvas.height / 2;
 Using the canvas height to calculate the clock radius, makes the clock work for all canvas sizes.

Remap the (0,0) position (of the drawing object) to the center of the canvas:

ctx.translate(radius, radius);

Reduce the clock radius (to 90%) to draw the clock well inside the canvas:

radius = radius * 0.90;

Create a function to draw the clock:

function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}