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