Wall clocks aren’t just functional; They can also enhance the visual appeal of a webpage or project. Creating a wall clock in JavaScript using the HTML5 canvas element to render graphics is a great way to improve your programming skills. In this article, we will guide you in creating a dynamic and interactive clock using JavaScript.
What You'll Learn:
- How to use the HTML5 canvas element.
- How to create shapes and text on canvas using JavaScript.
- Implementing real time clock functionality.
Creating a Wall Clock in JavaScript Step by Step Guide
Step 1: Create HTML Structure
The first step is to create a simple HTML structure for your clock. Use the following code to set a canvas element, which will act as the clock’s surface.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wall Clock in JavaScript</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: orangered;
}
canvas {
background-color: orangered;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
Step 2: Creating JavaScript for the clock.
The main functionality of the wall clock is implemented in JavaScript. The code to create the clock face, numbers and hands is given below:
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90;
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
const grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.strokeStyle = grad;
ctx.lineWidth = radius * 0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
for (let num = 1; num < 13; num++) {
let ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius) {
const now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
// Hour
hour = hour % 12;
hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
drawHand(ctx, hour, radius * 0.5, radius * 0.07);
// Minute
minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
drawHand(ctx, minute, radius * 0.8, radius * 0.07);
// Second
second = (second * Math.PI / 30);
drawHand(ctx, second, radius * 0.9, radius * 0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
Conclusion
Creating a wall clock in JavaScript is a great way to enhance your coding skills while adding a dynamic element to your webpage. With HTML5 Canvas and JavaScript, you can create a stunning clock that updates in real time. Start experimenting today and make your project unique!
Frequently Asked Questions
1. Can I customize watch colors and styles? Yes, you can modify canvas styles, gradients, and fonts in JavaScript code to suit your preferences.
2. Is this clock responsive? Although this example is not fully responsive, you can adjust the canvas dimensions and use CSS to adapt it to different screen sizes.
3. Which browsers support the canvas element? HTML5 Canvas is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.
Javascript Clock Source Code
Send download link to:
