Home > Abakada: Back to Basics > Language References > HTML Elements > CANVAS Element
| Defines a region for drawing graphics on the fly. | HTML 5 |
HTML Syntax
<canvas height=vertical_size width=horizontal_size>
...
</canvas>
NOTE: Both start and end tags are required.
The <canvas> element defines a region in the document which can be used for rendering graphics or other visual images on the fly, using scripts.
The resolution-dependent bitmap canvas has two attributes to control its size: width and height. If not specified, the width attribute defaults to 300, and the height attribute defaults to 150.
The element includes an extensive set of methods for drawing paths, shapes, colors, text and images, and allow for complex pixel manipulation, transformation, compositing, and animation.
The element’s main use is for rendering dynamically generated imagery and graphical content.
The <canvas> element supports the following attributes, in addition to global attributes common to all HTML elements.
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
Here is a basic example, taken from the HTML Living Standard website, of a script that uses <canvas> to draw glowing lines.
Show me
Scripts for dynamically generated artwork can be quite complex and beyond the scope of this workshop.
For detailed information on further use of the CANVAS element, please see the element definition in the HTML standard.
AUDIO IMG PICTURE VIDEO