Analog Clock with HTML Canvas and JavaScript

An analog clock on HTML Canvas is built by drawing a circular dial and rotating three hands from the current JavaScript Date. The hour hand must include the current minutes, and the minute hand can include seconds for smoother positioning.

Convert time to hand angles Top ↑

const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;

const secondAngle = seconds * Math.PI / 30;
const minuteAngle = minutes * Math.PI / 30;
const hourAngle = hours * Math.PI / 6;

Rotate one reusable hand Top ↑

function drawHand(angle, length, width) {
  ctx.save();
  ctx.translate(centerX, centerY);
  ctx.rotate(angle);
  ctx.moveTo(0, 12);
  ctx.lineTo(0, -length);
  ctx.lineWidth = width;
  ctx.stroke();
  ctx.restore();
}

Refresh the clock Top ↑

drawClock();
setInterval(drawClock, 1000);

This replaces the old string-based setTimeout('my_function()', speed) pattern with a direct function reference.

Original Plus2net clock demos Top ↑

Dial | Second hand | Minute hand | Hour hand | Clock border | Numbers | Synchronize time | Clock size | Stopwatch | JavaScript source demo

Accessibility Top ↑

A visual clock should have a text equivalent when the current time is important. The example above updates a nearby text value alongside the Canvas.

Frequently asked questions Top ↑

Why does the hour hand include minutes?

An analog hour hand moves continuously between hour marks.

Why use translate()?

It moves the coordinate origin to the clock center and simplifies hand drawing.

Why use save() and restore()?

They prevent each rotation from affecting later drawing operations.

Should I use setInterval or requestAnimationFrame?

For a once-per-second clock, setInterval is sufficient. Use requestAnimationFrame for smooth continuous animation.

Does the clock show server time?

No. JavaScript Date uses the visitor's local device time unless you explicitly supply another time source.

Canvas with JavaScript or jQuery | arc() | Canvas reference

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: