HTML5 Canvas Tutorial

Jakob Jenkov
Last update: 2022-03-24

The HTML5 Canvas element enables you do draw 2D graphics freely inside the bounds of the canvas element in your HTML5 page. Thus, the HTML5 Canvas is a great alternative for e.g. drawing charts and graphs inside a web page. You can even create 2D games using the HTML5 Canvas element.

The HTML5 Canvas element is a normal HTML5 element, so you declare it like any other HTML element. However, the way you draw graphics on the canvas element is via a JavaScript API.

Below is a simple example. Click this button to draw on the canvas:

HTML5 Canvas not supported

This example, however, only shows a very little part of what you can do with the HTML5 canvas element.

HTML5 Canvas Features and Concepts

Here is a list of the HTML5 Canvas element core features and concepts:

To learn more about each of these above topics, click the link in the list.

Jakob Jenkov

Featured Videos


Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC