HTML <canvas> Tag: The HTML canvas tag is used to draw graphics using any scripting language. Generally, JavaScript is used to draw the graphics. The HTML <canvas> tag is only a container for graphics as we need to use any scripting language.
HTML <canvas> Tag
The HTML<canvas> tag supports both the global and the event attributes. HTML canvas tag belongs to Flow content, Phrasing content, Embedded content, and Palpable Content category.
Syntax: <canvas>Text</canvas>
Attributes
The canvas tag contains two attributes which are listed below:
height: This attribute is used to set the height of the canvas.
width: This attribute is used to set the width of the canvas.
Browser compatibility
HTML<canvas> tag is supported by different types of browsers.
- Chrome-4.0
- Safari-3.1
- Opera-9.0
- Firefox-2.0
- Internet Explorer-9.0
Example:
<!DOCTYPE html> <html> <body> <canvas id="canvas"> HTML5 canvas tag is not supported</canvas> <script> var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 100); </script> </body> </html>
Output:
Attributes that are supported by the <canvas> tag
Attribute | Value | Description |
---|---|---|
height | pixels | Specifies the height of the canvas |
width | pixels | Specifies the width of the canvas |