HTML Canvas Tutorial for Beginners

Want to know the basics of what an HTML Canvas is all about? The HTML canvas element is used to draw the graphics on the webpages. The <canvas> element is taken as a container only for graphics. You must use a script to draw the illustrations.

Canvas has many methods for drawing many things like paths, boxes, circles, text, and adding images.

In this article, we will discuss the following topics:

  • What is an HTML canvas?
  • Canvas drawing
  • Canvas coordinates
  • Canvas gradients
  • Canvas text
  • Canvas images

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:

HTML-canvas

You will get a rectangle inside your web page.

output-html-canvas

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

Canvas Drawing

The drawings on the HTML are done using JavaScript.

html-canvas-drawing

Your web page will look like below - 

output-html-canvas-drawing

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.

html-draw-line

/output-html-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.

canvas-gradient

This will produce the following gradient:

output-linear-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.

radial-gradient.

The gradient will look like the image below:

output-radial.

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.

hrml-canvas-text

The text will look like below: 

output-html-text.

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.   

image-html-canvas.

This code will produce the following result :

image-output

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.

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.