HTML canvas Tag

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:

html canvas tag

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