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>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.