We are going to draw an analog clock and make it work as a real clock. In your body part of the HTML document, type the following code:
<canvas id="myclock" height="500" width="500"></canvas> In your <script></script> tags, take the following variables: Var canvas; // the clock canvas var canvasElement; // canvas's elements // clock settings var cX = 0; var cY = 0; var radius = 150;
Here, cX and cY are the center coordinates of our clock. We took 150 px as the clock's radius. You can increase or decrease it.
Then, we need to initialize the variables. Make an init(); function after defining the preceding variables.
The function should look similar to the following:
function init() {
canvas = document.getElementById("myclock");
//Called the element to work on.
canvasElement = canvas.getContext("2d");
//Made the context 2d.
cX = canvas.width / 2;
// we divided by two to get the middle point of X-axis
cY = canvas.height / 2;
// we divided by two to get the middle point of Y-axis
initTime(); //called the initTime() function.
drawClock(); //Called the drawClock() function to draw the graphics.
setInterval("animateClock()", 1000); // Made the animation for each second. Here 1000 is equal to 1 second.
}Let's initialize the second, minute, and hour hands of our clock:
function initTime() {
date = new Date();
hours = date.getHours() % 12; // Divided by 12 to make our clock 12 hours.
minutes = date.getMinutes();
seconds = date.getSeconds();
}Here, date.getHours(), date.getMinutes(), and date.getSeconds() will return your computer's time and save them on our variables.
Make another function that will animate our clock:
function animateClock() {
//This function will help our 'second' hand to move after an interval.
clearCanvas(); // This will clear the canvas
refreshTime(); // This will refresh time after 1 second.
drawClock(); // This will draw the clock.
}We will write clearCanvas(), refreshTime(), and drawClock() now:
function clearCanvas() {
canvasElement.clearRect(0, 0, canvas.width, canvas.height);
}Here, canvasElement.clearRect(0, 0, canvas.width, canvas.height); will reset our canvas after a definite time interval.
Our refreshTime() function should look as shown in the following:
function refreshTime() {
seconds += 1;
if (Math.floor((seconds / 60)) != 0) { //we divide seconds by 60 until second is equal to zero.
minutes += 1; // If 60 second is passed we increment minute by 1.
seconds %= 60;
}
if (Math.floor((minutes / 60)) != 0) {
hours += 1; //We increment hour by 1 after 60 minutes.
minutes %= 60;
}
}We incremented our seconds variable in the refreshTime() function. Therefore, whenever this function is called, our variable will be incremented by 1. Then, we have done two conditional operations for our hours and minutes.
Now, let's draw the clock:
function drawClock() {
drawClockBackground(); //This draws clock background.
drawSecondsHand(); //This draws clock's second hand.
drawMinutesHand(); //This draws clock's minute hand.
drawHoursHand(); //This draws clock's hour hand.
}We will write the drawClockBackground(), drawSecondsHand(), drawMinutesHand(), and drawHoursHand() functions:
function drawClockBackground() {
//this function will draw the background of our clock. We are declaring few variables for mathematical purposes.
var correction = 1/300;
var shift_unit = 1/170;
var shift_factor = 1/30;
var angle_initial_position = 2;
var angle_current_position_begin = 0;
var angle_current_position_end = 0;
var repeat = 60;
var lineWidth = 10;
for (var i=0; i < repeat; i+=1) {
//These lines are written for making our clock error free with the angle of the hands (hands' positions)
angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;
angle_current_position_end = angle_current_position_begin + shift_unit;
if (i % 5 === 0)
lineWidth = 20;
else
lineWidth = 10;
drawArcAtPosition(cX, cY, radius, angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
}
drawLittleCircle(cX, cY);
}We performed some mathematical things in this function and wrote the drawLittleCircle(cX, cY) function for a little circle on the center of our clock.
The function should look similar to the following:
function drawLittleCircle(cX, cY) {
drawArcAtPosition(cX, cY, 4, 0*Math.PI, 2*Math.PI, false, 4);
}Write the drawSecondsHand() function. This function will draw the second hand, as follows:
function drawSecondsHand() {
/* Simple mathematics to find the co ordinate of the second hand;
You may know this: x = rcos(theta), y = rsin(theta). We used these here.
We divided the values n=by 30 because after 5 seconds the second hand moves 30 degree.
*/
endX = cX + radius*Math.sin(seconds*Math.PI / 30);
endY = cY - radius*Math.cos(seconds*Math.PI / 30);
drawHand(cX, cY, endX, endY);
}Our drawMinutesHand() function should look as shown in the following. This function will draw the minute hand of our clock, as follows:
function drawMinutesHand() {
var rotationUnit = minutes + seconds / 60;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.8*radius;
endX = cX + handLength*Math.sin(rotation);
endY = cY - handLength*Math.cos(rotation);
drawHand(cX, cY, endX, endY);
}Now, let's see our drawHoursHand(); function. This function will draw the hour hand:
function drawHoursHand() {
var rotationUnit = 5 * hours + minutes / 12;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.4*radius;
endX = cX + handLength*Math.sin(rotation);
endY = cY - handLength*Math.cos(rotation);
drawHand(cX, cY, endX, endY);
}We used a drawHand(); function in the preceding functions. Let's write the function, as follows:
function drawHand(beginX, beginY, endX, endY) {
canvasElement.beginPath();
canvasElement.moveTo(beginX, beginY);
canvasElement.lineTo(endX, endY);
canvasElement.stroke();
canvasElement.closePath();
}Now, we are going to write the last function for our clock, as shown in the following snippet:
function drawArcAtPosition(cX, cY, radius, start_angle, end_angle, counterclockwise, lineWidth) {
canvasElement.beginPath();
canvasElement.arc(cX, cY, radius, start_angle, end_angle, counterclockwise);
canvasElement.lineWidth = lineWidth;
canvasElement.strokeStyle = "black";
canvasElement.stroke();
canvasElement.closePath();
}The full code of our clock should look similar to the following code:
<html>
<head>
<script type="text/javascript">
var canvas;
var canvasElement;
// clock settings
var cX = 0;
var cY = 0;
var radius = 150;
// time settings
var date;
var hours;
var minutes;
var seconds;
function init() {
canvas = document.getElementById("myclock");
canvasElement = canvas.getContext("2d");
cX = canvas.width / 2;
cY = canvas.height / 2;
initTime();
drawClock();
setInterval("animateClock()", 1000);
}
// get your system time
function initTime() {
date = new Date();
hours = date.getHours() % 12;
minutes = date.getMinutes();
seconds = date.getSeconds();
}
// animate the clock
function animateClock() {
clearCanvas();
refreshTime();
drawClock();
}
// clear the canvas
function clearCanvas() {
canvasElement.clearRect(0, 0, canvas.width, canvas.height);
}
// refresh time after 1 second
function refreshTime() {
seconds += 1;
if (Math.floor((seconds / 60)) != 0) { minutes += 1; seconds %= 60; }
if (Math.floor((minutes / 60)) != 0) { hours += 1; minutes %= 60; }
}
// draw or redraw Clock after time refresh function is called
function drawClock() {
drawClockBackground();
drawSecondsHand();
drawMinutesHand();
drawHoursHand();
}
function drawHand(beginX, beginY, endX, endY) {
canvasElement.beginPath();
canvasElement.moveTo(beginX, beginY);
canvasElement.lineTo(endX, endY);
canvasElement.stroke();
canvasElement.closePath();
}
// draw Hand for seconds
function drawSecondsHand() {
endX = cX + radius*Math.sin(seconds*Math.PI / 30);
endY = cY - radius*Math.cos(seconds*Math.PI / 30);
drawHand(cX, cY, endX, endY);
}
// draw Hand for minutes
function drawMinutesHand() {
var rotationUnit = minutes + seconds / 60;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.8*radius;
endX = cX + handLength*Math.sin(rotation);
endY = cY - handLength*Math.cos(rotation);
drawHand(cX, cY, endX, endY);
}
// draw Hand for hours
function drawHoursHand() {
var rotationUnit = 5 * hours + minutes / 12;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.4*radius;
endX = cX + handLength*Math.sin(rotation);
endY = cY - handLength*Math.cos(rotation);
drawHand(cX, cY, endX, endY);
}
function drawClockBackground() {
var correction = 1/300;
var shift_unit = 1/170;
var shift_factor = 1/30;
var angle_initial_position = 2;
var angle_current_position_begin = 0;
var angle_current_position_end = 0;
var repeat = 60;
var lineWidth = 10;
for (var i=0; i < repeat; i+=1) {
angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;
angle_current_position_end = angle_current_position_begin + shift_unit;
if (i % 5 == 0) lineWidth = 20;
else lineWidth = 10;
drawArcAtPosition(cX, cY, radius, angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
}
drawLittleCircle(cX, cY);
}
function drawArcAtPosition(cX, cY, radius, start_angle, end_angle, counterclockwise, lineWidth) {
canvasElement.beginPath();
canvasElement.arc(cX, cY, radius, start_angle, end_angle, counterclockwise);
canvasElement.lineWidth = lineWidth;
canvasElement.strokeStyle = "black";
canvasElement.stroke();
canvasElement.closePath();
}
function drawLittleCircle(cX, cY) {
drawArcAtPosition(cX, cY, 4, 0*Math.PI, 2*Math.PI, false, 4);
}
</script>
</head>
<body onload="init()">
<canvas id="myclock" height="500" width="500"></canvas>
</body>
</html>If you can see the output of your code as the following image, then congratulations! You successfully created your HTML clock using canvas:
