<canvas> element
The <canvas> element provides a resolution-dependent bitmap canvas for rendering graphics, animations, game graphics, data visualization, and image manipulation on the fly using JavaScript. It acts as a container for graphics that are drawn via scripting, typically using the Canvas 2D API or WebGL for 3D graphics.
This page was last updated on 2025-11-17
Syntax
The <canvas> element includes fallback content between its tags for browsers that don’t support it:
<canvas id="myCanvas" width="400" height="300">
Your browser does not support the canvas element.
</canvas>
Key Attributes
width— The width of the canvas in pixels. Default is 300. This sets the coordinate space, not just the display size.height— The height of the canvas in pixels. Default is 150. This sets the coordinate space, not just the display size.
Important: The width and height attributes define the canvas’s coordinate space. If you resize the canvas using CSS, the canvas will be scaled, potentially resulting in blurry graphics. Always set these attributes directly or via JavaScript rather than using CSS dimensions.
Examples
Basic Canvas Setup
<canvas id="drawingCanvas" width="500" height="400">
Your browser does not support the canvas element.
</canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
// Draw a blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
</script>
The canvas element itself is just a container. All drawing is done through JavaScript using the 2D rendering context.
Drawing Shapes and Text
<canvas id="shapesCanvas" width="400" height="300">
Canvas not supported.
</canvas>
<script>
const canvas = document.getElementById('shapesCanvas');
const ctx = canvas.getContext('2d');
// Draw a circle
ctx.beginPath();
ctx.arc(200, 150, 80, 0, Math.PI * 2);
ctx.fillStyle = '#ff6600';
ctx.fill();
// Add text
ctx.font = '24px Arial';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.fillText('Canvas', 200, 158);
</script>
Responsive Canvas
<canvas id="responsiveCanvas">
Canvas not supported.
</canvas>
<script>
const canvas = document.getElementById('responsiveCanvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = 400;
draw();
}
function draw() {
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
</script>
When to Use
Ideal Use Cases:
- Data visualization (charts, graphs, infographics)
- Games and animations
- Image editing and manipulation
- Real-time video processing
- Drawing applications
- Particle effects and simulations
- Generative art
Accessibility Considerations:
- Canvas content is not accessible to screen readers by default
- Provide alternative text descriptions using fallback content or ARIA labels
- Consider using
role="img"andaria-labelfor static graphics - For interactive content, provide keyboard navigation and focus management
- If the canvas displays important information, provide it in an accessible format elsewhere
- Use the hit region API or manual hit testing for clickable areas
Performance Tips:
- Minimize canvas clearing and redrawing
- Use
requestAnimationFrame()for smooth animations - Consider using off-screen canvases for complex compositions
- Be mindful of canvas size — larger canvases require more memory
- Use layers (multiple canvases) for elements that update at different rates
When to Use Alternatives:
- For simple shapes and icons: Use CSS or inline SVG
- For scalable graphics: Use SVG (vector-based, accessibility-friendly)
- For static images: Use
<img>element - For text content: Use semantic HTML elements
