Language References

---

Defines a region for drawing graphics on the fly.

HTML 5

HTML Syntax

<canvas
   class = classname
   id = value
   height = vertical dimension
   style = css properties
   title = text
   width = horizontal dimension
   event = script
>

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.

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.