HTML <canvas> Canvas Tag
The <canvas> tag in HTML is used to draw graphics on the fly via JavaScript. It provides a space on the webpage where you can render graphics, animations, and interactive content directly within the browser. The <canvas> element itself does not display anything until you use JavaScript to draw on it.
Syntax:
<canvas id="myCanvas" width="500" height="400">
Your browser does not support the canvas element.
</canvas>
Attributes:
id: Specifies a unique identifier for the<canvas>element. This is used to reference the element in JavaScript.Example:
<canvas id="myCanvas" width="500" height="400"></canvas>width: Defines the width of the canvas in pixels. If not specified, the default width is 300 pixels.Example:
<canvas width="800"></canvas>height: Defines the height of the canvas in pixels. If not specified, the default height is 150 pixels.Example:
<canvas height="600"></canvas>Fallback Content: Any content placed between the opening and closing
<canvas>tags is used as fallback content. This content is displayed if the browser does not support the canvas element.Example:
<canvas id="myCanvas" width="500" height="400"> Your browser does not support the canvas element. </canvas>
JavaScript API:
To draw on the canvas, you use JavaScript with the Canvas API. Here’s a basic example:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
// Get the canvas element and its context
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d'); // 2D rendering context
// Draw a rectangle
ctx.fillStyle = 'blue'; // Set fill color
ctx.fillRect(50, 50, 150, 100); // Draw rectangle (x, y, width, height)
// Draw a circle
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // Draw circle (x, y, radius, startAngle, endAngle)
ctx.fillStyle = 'red'; // Set fill color
ctx.fill(); // Fill the circle with color
</script>
</body>
</html>
Common Canvas API Methods:
getContext('2d'): Returns the 2D rendering context for the canvas, which is used to draw shapes, text, and images.Drawing Shapes:
fillRect(x, y, width, height): Draws a filled rectangle.strokeRect(x, y, width, height): Draws an outlined rectangle.beginPath(): Begins a new path for drawing shapes.arc(x, y, radius, startAngle, endAngle): Draws an arc (part of a circle).
Drawing Text:
fillText(text, x, y): Draws filled text at the specified coordinates.strokeText(text, x, y): Draws outlined text at the specified coordinates.
Drawing Images:
drawImage(image, x, y, width, height): Draws an image onto the canvas.
Use Cases:
- Graphics and Games: Create custom graphics, animations, and games directly in the browser.
- Data Visualization: Draw charts and graphs, including interactive visualizations.
- Image Editing: Develop tools for drawing or editing images.
- Animations: Create animations by continuously updating the canvas in a loop.
Accessibility and SEO:
- Accessibility: Canvas content is not directly accessible to screen readers or search engines. You should provide alternative content or descriptions for important information rendered on the canvas.
- SEO: Content drawn on the canvas is not indexed by search engines, so it should not be used for critical content that needs to be searchable.