In our final JavaScript example, we are going to be building an analog clock using JavaScript and the HTML canvas element. The HTML canvas element allows us to create graphics inside of a web page and it comes with several methods of its own as we will see. This example will make use of all of the different JavaScript concepts that we have learned. 

Getting Started

To get started we first need to create our canvas element. To do this, we need to define the width and height of the element that will render our clock face and hands. Basically, we are making a box and then mounting a circle inside of this box.

We’ve defined our canvas and if we were to open this piece of HTML in our browser we would have a solid gray box. We need to add our clock face and then add the logic that runs the clock using JavaScript.

JavaScript Clock FaceWe bound our canvas to the element variable then created a 2d object with our graphic variable. We then used the height of our box to calculate the radius of the circle. We used the radius to map the graphic variable to the middle of the canvas box. We then decreased the size of the radius variable by 90% so that we could draw the circle correctly with the arc method. Finally, we defined a fillStyle for the circle element and filled it with white. We created a startClock function and ran it because without it, we would not actually draw the circle.

We will now refactor our startClock function so that the code will be more efficient and so that we will have all of the similar functions in one place. We will do this by creating three separate functions that will be inside of this startClock function. One function will draw the entire face, one will draw the numbers on the clock and the other one will give the clock the logic it needs to work.

Refactoring for Effect 

In our dFace function, we create two separate elements; a white circle that will contain our clock and a small black circle in the middle that will act as our clock center. As you can see by the two separate blocks of code, the only difference is that in the 2nd arc function we decrease the radius to 10% of it’s size. If we were to run this code without the other two functions, we would see a white circle with a small black circle inside of it. Now let’s place the numbers into the clock.

In this function, we use a for loop to loop through the numbers one to twelve. As we loop through each number we place that number 85% of the original radius away from the center of the circle and draw it as ~60px size text. We then make sure that each number is six degrees away from the last number because 360 degrees /12 is six. Let’s look at the startTime function and the logic that will make the hands move.

We have most of what we need now, however, our drawHand function is not a method for the canvas and we need to define it to render the hands to the canvas. As you can see, this is a case of using a function to create reusable code as we use drawHand three times in the startTime function.

Bringing Our Code to Life

JavaScript ClockThis is our mostly finished code. We have our functions which render everything and if we reload the browser screen it will change the time but we want to automate the clock itself and not have to reload the screen every second. To do this, all we need to do is call the setInterval function in our code and pass the startClock function into it. We then pass as a second argument, the amount of time we want to wait before the function gets called again which in this case is 1000 milliseconds. The setInterval function allows us to get away with a bit of trickery. As with most graphics, we are just re-rendering the entire clock every 1000 milliseconds. Our completed code base will look something like this (you may also visit our github for the source code).

What Now?

In this post, we took a look at an HTML canvas example and created an analog clock using HTML and JavaScript. We broke down all of the steps and functions used inside of the code. This example and post will be our final code example for the JavaScript tutorial (at least for now). It is very likely that we will revisit some of the node.js libraries like react.js and angular.js. We will also probably go over TypeScript at some point which is a superset language of JavaScript. We will also cover some live coding tutorials on our Youtube channel so keep your eyes peeled. 

This tutorial is just designed to get you started. To become a JavaScript god you need to practice and start making code on your own. You can do this at Codewars and by running other code Katas. The best way by far for you to become a JavaScript master is to just sit down and code. 

Our next tutorial will cover Golang, a low-level imperative language that was built by google.