Startup of Canvas Clock

Part Five - Starting the Clock

To start the clock, call the drawClock function at regular intervals:

JavaScript:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//drawClock();
setInterval(drawClock, 1000);

Try It Yourself

Code Explanation

The only thing you need to do (to start the clock) is to call the drawClock function at regular intervals.

Using:

setInterval(drawClock, 1000);

Replacement:

drawClock();

Note: The interval is in milliseconds. drawClock() is called every 1000 milliseconds.

See also:

Complete Canvas Reference Manual of CodeW3C.com