Analog Clock Using HTML5

Introduction

In this article, we learn how to create an analog clock using HTML5. We use a canvas element of HTML and moveTo, lineTo and stroke methods of the HTML5 canvas.

Step 1. First we define the body of the HTML page, like this.

<body>  
   <div>  
      <h1>Clock Using HTML5</h1>  
   </div>  
   <canvas id="mycanvas" width="800" height="850"></canvas>  
   <script src="Clockscript.js" type="text/javascript"></script>  
</body>

Step 2. Then we define the functionality using JavaScript. We use the createcircle function to draw the circle for the clock face, the createnos function to draw numbers on the clock, the createcentre function to draw a small filled circle at the clock center and the createhand function to draw the lines that represent clock hands, like this.

function createcircle() {  
    context.beginPath();  
    context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2, true);     
    context.stroke();  
}  

function createnos() {  
    var nos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];  
    var angle = 0;  
    var nowidth = 0;  
    nos.forEach(function (numeral) {  
        angle = Math.PI / 6 * (numeral - 3);  
        nowidth = context.measureText(numeral).width;  
        context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (Hr) - nowidth / 2, canvas.height / 2 + Math.sin(angle) * (Hr) + font / 3);  
    });  
}  

function createcenter() {  
    context.beginPath();  
    context.arc(canvas.width / 2, canvas.height / 2, 15, 0, Math.PI * 2, true);  
    context.fill();  
}  

function createhand(loc, isHour) {  
    var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2;  
    var handRadius = isHour ? r - x - Hx : r - x;  
    context.moveTo(canvas.width / 2, canvas.height / 2);  
    context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);   
    context.stroke();  
}  

function createhands() {  
    var date = new Date();  
    var hour = date.getHours();  
    hour = hour > 12 ? hour - 12 : hour;  
    createhand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);  
    createhand(date.getMinutes(), false, 0.5);  
    createhand(date.getSeconds(), false, 0.2);  
}  

function createclock() {  
    context.clearRect(0, 0, canvas.width, canvas.height);  
    createcircle();  
    createcenter();  
    createhands();  
    createnos();  
}

Step 3. We use CSS in the Head section of the HTML to provide the look and formatting of our HTML page, like this.

<head>  
    <title>Clock</title>  
    <style>  
        body {  
            background: white;  
            border: 1px solid black;  
            cursor: crosshair;  
        }  
        #mycanvas {  
            background: pink;  
            border: thick solid #aaaaaa;  
        }  
    </style>  
</head>

The complete code looks like this.

// HTML Code
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Clock</title>  
    <style>  
        body {  
            background: white;  
            border: 1px solid black;  
            cursor: crosshair;  
        }  
        #mycanvas {  
            background: pink;  
            border: thick solid #aaaaaa;  
        }  
    </style>  
</head>  
<body>  
    <div><h1>Clock Using HTML5</h1></div>  
    <canvas id="mycanvas" width="800" height="850"></canvas>  
    <script src="Clockscript.js" type="text/javascript"></script>  
</body>  
</html>  

// JavaScript Code
var canvas = document.getElementById('mycanvas'),
    context = canvas.getContext('2d'),
    font = 35,
    padding = 35,
    x = canvas.width / 25,
    Hx = canvas.width / 10,
    space = 20,
    r = canvas.width / 2 - padding,
    Hr = r + space;

function createcircle() {  
    context.beginPath();  
    context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2, true);     
    context.stroke();  
}  

function createnos() {  
    var nos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];  
    var angle = 0;  
    var nowidth = 0;  
    nos.forEach(function (numeral) {  
        angle = Math.PI / 6 * (numeral - 3);  
        nowidth = context.measureText(numeral).width;  
        context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * Hr - nowidth / 2, canvas.height / 2 + Math.sin(angle) * Hr + font / 3);  
    });  
}  

function createcenter() {  
    context.beginPath();  
    context.arc(canvas.width / 2, canvas.height / 2, 15, 0, Math.PI * 2, true);  
    context.fill();  
}  

function createhand(loc, isHour) {  
    var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2;  
    var handRadius = isHour ? r - x - Hx : r - x;  
    context.moveTo(canvas.width / 2, canvas.height / 2);  
    context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);   
    context.stroke();  
}  

function createhands() {  
    var date = new Date();  
    var hour = date.getHours();  
    hour = hour > 12 ? hour - 12 : hour;  
    createhand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);  
    createhand(date.getMinutes(), false, 0.5);  
    createhand(date.getSeconds(), false, 0.2);  
}  

function createclock() {  
    context.clearRect(0, 0, canvas.width, canvas.height);  
    createcircle();  
    createcenter();  
    createhands();  
    createnos();  
}  

context.font = font + 'px Arial';  
var loop = setInterval(createclock, 1000);

Output