<canvas> Tag Syntax
Rules for coding HTML canvas
elements
<body> ... flow content expected ... <canvas width="width" height="height"> ... flow content ... </canvas> ... ... phrasing content expected ...<canvas width="width" height="height">... ... phrasing content ...</canvas>... ... </body>
Rules for coding the HTML canvas element
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Since the canvas element has a transparent content model, it can be coded anywhere phrasing content is allowed, including where flow content is expected.
- Begin the canvas element with a starting <canvas> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlns
attribute on the <html> tag. - Inside the starting
<canvas>
tag, code the desired width and height of the canvas in the width and height attributes. - Inside the canvas element, between the starting
<canvas>
tag and the ending</canvas>
tag, code the fallback content. The fallback content should convey to the user information that is equivalent to what is displayed on the canvas. - End the canvas element with a matching
</canvas>
closing tag.
<canvas> Content Model
Content of the canvas element
When coded in flow content
When coded in flow content, the content of the canvas element can include HTML comments, text content and any HTML tags that can be used in flow content.
When coded in phrasing content
When coded in phrasing content, the content of the canvas element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.