Geek Culture
Published in

Geek Culture

Creating a Beautiful Clock Using HTML5 Canvas

Revisiting the clock that I created 4 years back

HTML5 provides us with the Canvas API which can be used to draw graphics on a browser using Javascript. We can start drawing graphics in the browser by just adding a canvas tag in HTML. It is similar to the real canvas that we use to paint. We can draw various shapes and texts and animate them using Javascript.

In this article, we will be using HTML5 Canvas and Javascript to create a beautiful clock.

Add HTML — Layout

First, we will start by adding an HTML file with a canvas tag

index.html

Add CSS — Style

Next, we will add a CSS file that contains some basic styling for the body tag.

style.css

Add Javascript — Logic

The clock contains texts and different shapes like Rectangle, Arc, etc. We will be adding the code to create those basic shapes.

draw_component.js

In the above file, we added logic to create Rectangle, Circle, and Text.

Next, we will add the code to render the clock based on the current time. For that, we need to add a few logic to decide the current position of the hour, minute and seconds hand.

script.js

Our script contains 3 parts.

PART I - Line 1 to 26
PART II- Line 29 to 40
PART III- Line 45 to 92

PART I

Here we query the canvas element and initialize a 2D context as we are going to work on a 2D plane. We also defined few variables which hold the color of hour, minute, and seconds hand.

PART II

Here we have an init method that will be called while executing the script. Inside the init method, we defined the width and height of the canvas. Also, we called the method window.requestAnimationFrame with the draw method (line 45) as the parameter. The window.requestAnimationFrame executes the method 60 times per second thus making it an animation.

PART III

Here we have added the core logic which calculates the current position of the hour, minute, and seconds hand based on the current time. Since the requesAnimationFrame method is called repeatedly, the canvas is repainted with the new position of the hands based on the time.

Finally, the clock looks awesome.

Preview

Preview - https://codepen.io/ganeshkumarm/full/MobJdo
Source Code - https://github.com/ganeshkumarm1/CanvasClock

Thank you 🤘

To know more about me, visit ganeshkumarm.me

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Javascript Week 4 — Higher order functions

Add AI Denoising to your Video Calls using the Agora React Native UIKit

Getting Started with Nuxt.js

Registration and Login in Minutes

How to add Ghost animations to your Angular table

Top 10 Reasons Why JavaScript is So Popular in 2022

Understanding Memoization & the useMemo React Hook

Setup ESLint + Prettier + AirBnB Style with Create React App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ganesh Kumar Marimuthu

Ganesh Kumar Marimuthu

SDE II at Amazon. ✍️ Content Writer 🔸 👨‍💻 Full Stack Engineer

More from Medium

Don’t be scared of the regex

mongoexport show unable to authenticate using mechanism

10 Best 2D Architecture Software For Beginner

Using Dynamic Programming for Dyslexia — Automatic Spelling Mistakes Diagnosis