HTML Canvas Tutorial
- Previous Page Reference Manual for SVG
- Next Page Canvas Drawing
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>
The following chapters will introduce how to draw on the canvas.
See also:
Browser support
<canvas> element is part of the HTML5 standard (2014).
All modern browsers support <canvas>:
Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera | IE |
Support | Support | Support | Support | Support | 9-11 |
- Previous Page Reference Manual for SVG
- Next Page Canvas Drawing