FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

Canvas Clock Start


In these chapters we build an analog clock using HTML Canvas.


Part V - Start the Clock

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

JavaScript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//drawClock();
setInterval(drawClock, 1000);
Try it Yourself »

Example Explained

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

Substitute:

drawClock();

With:

setInterval(drawClock, 1000);

The interval is in milliseconds. drawClock will be called for each 1000 milliseconds.