HTML Tags

HTML <canvas> Tag

The <canvas> tag in HTML is used to draw graphics dynamically via JavaScript, including shapes, charts, animations, and games.
It is a container for graphics but does not have any visible output by itself until you draw on it using JavaScript.

Syntax

html

<canvas id="canvasID" width="value" height="value">
  Fallback content if canvas is not supported.
</canvas>

Attributes

Attribute	Description
id	Specifies a unique identifier for the canvas.
width	Width of the canvas in pixels (default is 300).
height	Height of the canvas in pixels (default is 150).
class	Standard class attribute for CSS styling.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Tag Example</title>
  <style>
    canvas { border: 2px solid #29AB87; }
  </style>
</head>
<body>

  <h2>Drawing on Canvas</h2>
  <canvas id="myCanvas" width="400" height="200">
    Your browser does not support the HTML canvas tag.
  </canvas>

  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Draw a rectangle
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(50, 50, 150, 100);

    // Draw a circle
    ctx.beginPath();
    ctx.arc(300, 100, 50, 0, 2 * Math.PI);
    ctx.fillStyle = "#0000FF";
    ctx.fill();
  </script>

</body>
</html>

Output

Browser Output

html

Displays a red rectangle and a blue circle drawn dynamically on the canvas using JavaScript.
Use our Try It Editor to see it in action.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Fully supported in modern browsers including Internet Explorer 9+.
Fallback content inside <canvas> is displayed if the browser does not support it.

Notes

The <canvas> tag cannot display content on its own - all graphics must be drawn with JavaScript.
Supports drawing 2D graphics via getContext('2d') and 3D graphics via WebGL (getContext('webgl')).
Useful for games, charts, visualizations, and dynamic graphics.
Always include fallback content for accessibility and unsupported browsers.
CSS can style the canvas border, background, or size but not its internal content - that must be drawn via JS.

Conclusion

The <canvas> tag is a versatile element for dynamic and interactive graphics in web pages.
It is fully supported across modern browsers, but requires JavaScript to render any visible content.

PreviousHTML <picture> Tag NextHTML <map> Tag