Tutorial on using Canvas in HTML5 to draw a smiling face_html5 tutorial tips

Today, you will learn about a web technology called Canvas and its association with the Document Object Model (commonly known as DOM). This technology is very powerful as it enables web developers to access and modify HTML elements by using JavaScript.

Now you may be wondering why we need to go big with JavaScript. In short, HTML and JavaScript are interdependent, and some HTML components, such as the canvas element, cannot be used independently of JavaScript. After all, what good is a canvas if we can't draw on it?

To better understand this concept, let’s try drawing a simple smiley face through a sample project. Let's get started.
Start

Start by creating a new directory to save your project files, then open your favorite text editor or web development tool. Once you do this, you should create an empty index.html and an empty script.js, which we will continue editing later.

Next, let’s modify the index.html file, which won’t involve much since most of the code for our project will be written in JavaScript. What we need to do in HTML is create a canvas element and reference script.js, which is pretty straightforward:

XML/HTML CodeCopy content to clipboard

1. /span>>body>
3.  canvas id='canvas' width='640' height='480'>canvas>
4.  script type='text/ javascript' src='script.js'> script>
6. body>html>

To explain, I use a set of tags and , so that we can add more elements to the document through the body. Seizing this opportunity, I completed a 640*480 canvas element with the id attribute canvas.

This attribute simply adds a string to the element for unique identification. We will use this attribute later to locate our canvas element in the JavaScript file. Next, we reference the JavaScript file using the <script> tag, which specifies the JavaScript language type and the path to the script.js file. <br />Manipulate DOM</script>

As its name is "Document Object Model", we need to access the HTML document by calling the interface using another language. Here, the language we use is JavaScript. To do this, we need to place a simple reference on the built-in document object. This object corresponds directly to our tag and, similarly, it is the basis of the entire project because we can access elements and perform changes through it.

XML/HTML CodeCopy content to clipboard

1. var canvas = document.getElementById('canvas');

Remember how we used id="canvas" to define a canvas element? Now we use the document.getElementById method to get this element from the HTML document, we simply pass the string matching the required element id. Now that we have obtained this element, we can start painting with it.

In order to draw with canvas, we must manipulate its context. Surprisingly, a canvas does not contain any methods or properties for drawing, but its context object has all the methods we need. A context definition looks like this:

XML/HTML CodeCopy content to clipboard

1. var context = canvas.getContext('2d');

Each canvas has several different contexts, depending on the purpose of the program, only one 2D context is enough, which will have access to all the drawing methods we need to create a smiley face.

Before we begin, I must inform you that the context stores two color properties, one for the stroke and one for the fill. For our smiley face, we need to set the fill to yellow and the brush to black.

XML/HTML CodeCopy content to clipboard

1. context.fillStyle = 'yellow';
2. context.strokeStyle = 'black';

After setting the required colors for the context, we have to draw a circle for the face. Unfortunately, there is no predefined method for circles in the context, so we need to use so-called paths. A path is simply a series of connected lines and curves, and the path is closed when the drawing is complete.

XML/HTML CodeCopy content to clipboard

1. context.beginPath();
2. context.arc(320, 240, 200, 0, 2 * Math.PI);
3. context.fill();
4. context.stroke();
5. context.closePath();

Explained this way, we use context to start a new path. Next, we create an arc with a radius of 200 pixels at the point (320, 240). The last two parameters specify the initial and final angles to build the arc from, so we pass 0 and 2 *Math.PI to create a complete circle. Finally, we use the context to fill and draw the path based on the color we have set.

Although closing the path is not required for the script to function, we still need to close the path so we can start drawing the new eyes and mouth of the smiley face. The eyes can be done the same way, each eye will need a smaller radius and a different position. But first we have to remember to set the fill color to white.

XML/HTML CodeCopy content to clipboard

1. context.fillStyle = 'white';
3. context.beginPath();
4. context.arc(270, 175, 30, 0, 2 * Math.PI);
5. context.fill();
6. context.stroke();
7. context.closePath();
9. context.beginPath();
10. context.arc(370, 175, 30, 0, 2 * Math.PI);
11. context.fill();
12. context.stroke();
13. context.closePath();

The above is all the code for the eyes. Now the mouth is very similar, but this time we won't fill the arc, our angle will be configured as a semicircle. To do this, we need to set the starting angle to zero and the ending angle to -1 * Math.PI. Remember, don't forget to set the brush color to red.

XML/HTML CodeCopy content to clipboard

1. context.fillStyle = 'red';
3. context.beginPath();
4. context.arc(320, 240, 150, 0, -1 * Math.PI);
5. context.fill()
6. context.stroke();
7. context.closePath();

Congratulations

Well done. You've completed this tutorial, made an awesome smiley face, and learned more about Canvas, HTML, JavaScript, and the Document Object Model. If you have any questions, please leave a message.