Before we jump right into the JavaScript portion of this application, we need to trigger the onLoad
event to call our init
function. We do that by adding the onLoad
property into our HTML body tag:
Let's break down the JavaScript portion and understand the reason behind doing this. The first step is to create the init
function:
Our init
function immediately calls the updateCanvas
function. This is done so that later we can refresh and call updateCanvas
again.
In the updateCanvas
function, we start by getting the current width of the browser and set a hardcoded value for the height of our drawing area:
Our next step is to get our canvas using its ID, and then set its new width and height based on the previous variables:
It's time for us to start drawing. To do that, we need to ask our canvas to return its context. There are a few types of contexts such as 2D and 3D. In our case we will focus on the 2D context as follows:
Now that we have the context, we have all that we need to start exploring and manipulating our canvas. In the next few steps, we define the canvas background color by setting the fillStyle
color using a hex value and by drawing a rectangle that would fit within the entire area of our canvas:
The fillRect
method takes four parameters. The first two are the (x,y) locations of the rectangle, in our case we wanted to start from (0,0), and the following parameters are the width and height of our new rectangle.
Let's draw our circles. To do so we will need to define the radius of our circle and the space between circles. Let's not space out the circles at all, and create circles with a radius of 10 px.
The first line assigns the radius for our circles, while the second line captures the gap between the centres of each circle we create, or in our case the diameter of our circle. By setting it up as two times the radius we space out our circles exactly one after the other.
Using our new gaps
variable, we discover how many circles we can create in the width and height of our canvas component. We create an array that stores a few color options for our circles and set a variable aColorsLength
as the length of aColors
. We do this to cut down the processing time, as variables are easier to fetch than properties as we are about to call this element many times in our for
loop:
Our nested for
loops enable us to create our circles to the width and height of our canvas. The first for
loop focuses on upgrading the width value while the second for
loop is in charge of running through every column.
Using Math.random
, we randomly select a color from aColors
to be used as the color of our new circle.
The first and last lines in the previous block of code declare the creation of a new shape. The beginPath
method defines the start of the shape and the closePath
method defines the end of it, while context.arc
creates the actual circle. The arc
property takes the following format of values:
The x
and y
properties define the center point of the arc (in our case a full circle). In our for
loops we need to add a buffer of an extra radius to push our content into the screen. We need to do this as only one fourth of our first circle would be visible if we didn't push it to the left and to the bottom by an extra radius.
Last but not least, we need to call the fill()
method to fill our newly-created shape with its color.
Let's make our element refresh once a second; to do that all we need to do is add two more lines. The first one will trigger a new call to the updateCanvas
function once every second using
setInterval
.
If you refresh your browser you will find that our sample is working. If you try really hard to find issues with it you will not, but we have a problem with it. It's not a major problem but a great opportunity for us to learn about another useful functionality of the canvas. At any stage we can clear the canvas or parts of it. Instead of drawing on top of the current canvas, let's clear it before we redraw. In the updateCanvas
function, we will add the following highlighted code:
As soon as we get the context we can clear the data that was already present by using the clearRect
method.