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 Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Next tutorial in this tutorial trail