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 »
<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>
Code Explained
Add an HTML <canvas> element to your page:
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
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();
}
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}