HTML5 Canvas: Beginner Tutorial Chapter 1 - Introduction and Basics

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:

• Chapter 1: Introduction and Basics
• Chapter 2: Drawing Lines
• Chapter 3: Rectangles and Circles
• Chapter 4: Write Text on Canvas

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.

HTML

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.
</canvas>

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.