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:

Example

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="400" height="400"
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>

Result


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 (var canvas) from the HTML canvas element:

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

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

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

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


www.w3schools.com

3D Effect

Portal scene

UI Design