HTML Canvas Tutorial

The HTML <canvas> element is used to draw graphics on web pages.

The above graphics were created using <canvas>.

It displays four elements: red rectangle, gradient rectangle, multicolored rectangle, and multicolored text.

What is HTML Canvas?

The HTML <canvas> element is used to dynamically draw graphics through scripts (usually JavaScript).

The <canvas> element is just a container for graphics. You must use scripts to draw actual graphics.

Canvas has multiple methods for drawing paths, boxes, circles, text, and adding images.

HTML Canvas can draw text

Canvas can draw colored text and can also have animation effects.

HTML Canvas can draw graphics

Canvas has powerful capabilities for visualizing data using graphics and charts.

HTML Canvas can be animated

Canvas objects can be moved. Everything is possible: from simple bouncing balls to complex animations.

HTML Canvas is interactive

Canvas can respond to JavaScript events.

Canvas can respond to any user operation (key click, mouse click, button click, finger movement).

HTML Canvas can be used for games

The animation methods of Canvas provide many possibilities for HTML game applications.

Canvas Example

In HTML, the <canvas> element looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

The <canvas> element must have an id attribute so that JavaScript can reference it.

The width and height attributes are also necessary to define the size of the canvas.

Tip: A single HTML page can have multiple <canvas> elements.

By default, the <canvas> element has no border and no content.

To add a border, use the style attribute:

Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Try it yourself

The following chapters will introduce how to draw on the canvas.

See also:

Complete Canvas reference manual on CodeW3C.com

Browser support

<canvas> element is part of the HTML5 standard (2014).

All modern browsers support <canvas>: