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 HTML canvas:

HTML code:

<!DOCTYPE html>
<html>
<body>

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

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let 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:

Create a canvas object (const canvas) the HTML canvas element:

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

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

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

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

let radius = canvas.height / 2;

Note

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();
}

Canvas Clock

Part I - Create the Canvas

HTML code:

Code Explained

Note

See Also: