22 Votes

HTML5 Canvas: Beginner Tutorial Chapter 1 - Introduction and Basics

Tutorial by Stefan Trost | Last update on 2023-11-30 | Created on 2015-12-20

In this tutorial, I would like to explain the basics of the HTML 5 Canvas. The tutorial is especially made for beginners having never used the HTML5 Canvas Element before.

The tutorial is divided into the following four independent parts, each of which highlights its own aspect:

You should definitely read the introduction because all of the chapters are based on the essentials described here.

What is the HTML5 Canvas?

The Canvas element was introduced in HTML5 and can be used for drawing and displaying graphics on a website quickly and easily. The special thing about the HTML5 Canvas is, that you can draw and refresh your graphic in real time using scripting languages such as JavaScript.

In opposite to static graphics, images or pictures such as PNG files or JPG files stored on the server, using the HTML5 Canvas, it is possible to dynamically adjust and modify the graphic at any time, for example in order to react to user interaction or to visualize changing data.


First of all, let us see how it is possible to build the HTML5 Canvas element into our HTML page. For this, the following HTML will be sufficient.

<canvas id="canv" width="200" height="200"></canvas>

With this, we are defining a drawing area with a size of 200 x 200 pixels. At this point, it is important to set an ID for the element ("canv" in this case) to be able to address the element later.

Optionally, we can also specify a text within the element that is displayed whenever the browser is not supporting HTML 5 Canvases.

<canvas id="canv" width="200" height="200">
  The canvas element is not supported by your browser.

By the way, all modern browsers such as Firefox, Chrome, Opera, Safari and Internet Explorer since Version 9 are supporting the Canvas.

JavaScript and the Context

That was all HTML we need to write. The rest and especially the drawing is made with JavaScript.

However, before starting to draw, we need the following two lines:

var canvas = document.getElementById('canv');
var context = canvas.getContext('2d');

In the first line, we are searching for the Canvas element by its ID. In the example above, we have used the ID "canv" that we are also using here, but of course, you can also apply any other arbitrary identifier.

After that, we are calling the method getContext('2d') in order to get a context object to our Canvas. This context object is provided by HTML 5 and contains all methods we need to draw on the canvas.

Next Step: Drawing

These were all important basics we need for using the Canvas. In a next step, we would like to see how to draw something on the Canvas. In the second part of this tutorial, we will do it.


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.