HTML Canvas Tutorial for Beginners

What is an HTML canvas?

The HTML <canvas> element helps in drawing graphics, via JavaScript. The <canvas> element acts as a container for graphics. You must use JavaScript to draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

In HTML, a <canvas> element looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

The <canvas> element should have an id so that it can be referred to by JavaScript.

You can easily find that element in DOM using getElementById() method as follows - 

var canvas = document.getElementById("mycanvas");

Let’s see an example of using <canvas> element in HTML:

You will get a rectangle inside your web page.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

Canvas Drawing

The drawings on the HTML are done using JavaScript.

Your web page will look like below - 

The getElementById() is a DOM method that is used to find the element by the id name.

The getContext() method is used to draw objects for the canvas.

The fillRect(x, y, width, height) draws a rectangle, filled with the fill style, on the canvas.

Canvas Coordinates

The HTML canvas is a two-dimensional grid. The upper-left corner has a coordinate (0,0).

Let’s see how we can draw a line using the same.

You can draw a straight line on the canvas. For this, use the following methods:

• moveTo(x,y) - It defines the starting point of the line.
• lineTo(x,y) - It represents the ending point of the line.

The stroke() method is used to stroke the subpaths and actually draw the line.

Canvas - Gradients

Gradients are used to fill the shapes on the canvas and are not limited to solid colors.

There are two types of gradients:

createLinearGradient

As its name suggests, it creates a linear gradient.

This will produce the following gradient:

The addColorStop() method specifies the color stops. The 0.0 is the offset at one end of the gradient, and 1.0 is the offset at the other end.

You can now use the gradient by using the fillStyle or strokeStyle property and then drawing the shape.

createRadialGradient

It creates a radial/circular gradient.

The gradient will look like the image below:

Canvas Text

You can include the text in your canvas by using the properties mentioned below:

• Font - It defines the current font settings.
• fillText(text,x,y) - It fills the given text at the specified position.
• strokeText(text,x,y) - It strokes the text at the specified position.

The text will look like below: 

Canvas Images

HTML canvas allows the user to add an image to the canvas. The drawImage(image, x, y) method is used to add an image.   

This code will produce the following result :

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details! 

Next Steps

We hope that this article offered you a brief insight into HTML Canvas and its functionalities. But to learn more about web development in its entirety, certification is highly recommended for jumpstarting your coding career. 

Simplilearn’s Full Stack Java Developer will help you master the world of web development. The course covers a comprehensive list of relevant topics, including front-end, middleware, and back-end Java web developer technologies. It will help you learn to build an application, end-to-end, test and deploy code, store data using MongoDB, and much more.

If you have any questions or feedback regarding the HTML tags article, let us know in the comments section. Our experts will get back to you as soon as possible.