canvas
The canvas element provides a drawing surface for rendering graphics, charts, games, and dynamic visual content via JavaScript.
Description
The <canvas> element provides a bitmap drawing surface for JavaScript-driven graphics. VB styles canvases as block-level and responsive by default, with variants for borders, loading states, interactive cursors, and drawing modes.
When to Use
- Charts and graphs: Data visualization (Chart.js, D3, etc.)
- Games: 2D and 3D game rendering
- Image manipulation: Filters, cropping, compositing
- Animations: Complex animations beyond CSS capabilities
- Drawing tools: Signatures, sketches, annotation
When to Use Other Elements
Variants
VB provides variant classes for borders, loading placeholders, and cursor modes. The interactive demo below includes a coordinate tracker (hover) and a freehand drawing canvas (click and drag).
<canvas width="300" height="150"></canvas><canvas class="bordered" width="300" height="150"></canvas><canvas class="drawing" width="300" height="150"></canvas>| Class | Effect |
|---|---|
| (default) | Block display, max-width 100% |
.bordered | Border + border-radius to define the canvas boundary |
.loading | Striped background pattern (placeholder before JS renders) |
.interactive | Crosshair cursor for click/hover interactions |
.drawing | Crosshair cursor + touch-action: none for freehand drawing |
.full | 100% container width |
.fixed | 100% width, fixed 400px height |
Drawing Examples
Canvas requires JavaScript to render. These demos show shapes, a working bar chart with data labels, and a responsive canvas that reports its own dimensions.
const canvas = document.getElementById('my-canvas');const ctx = canvas.getContext('2d'); // Fill rectanglectx.fillStyle = '#4a90d9';ctx.fillRect(20, 20, 150, 100); // Stroke rectanglectx.strokeStyle = '#8b5cf6';ctx.lineWidth = 3;ctx.strokeRect(200, 20, 150, 100); // Draw circlectx.beginPath();ctx.arc(350, 70, 40, 0, Math.PI * 2);ctx.fillStyle = '#10b981';ctx.fill();Responsive Canvas
Use .canvas-responsive to maintain aspect ratio while filling available width. The canvas is positioned absolutely inside the wrapper.
<section class="canvas-responsive"> <canvas></canvas></section>Custom Aspect Ratios
Override the default 16:9 ratio with inline aspect-ratio:
<!-- Square canvas --><section class="canvas-responsive" style="aspect-ratio: 1;"> <canvas></canvas></section> <!-- 4:3 canvas --><section class="canvas-responsive" style="aspect-ratio: 4 / 3;"> <canvas></canvas></section>Canvas Sizing
Canvas has two independent sizes: the element size (CSS) and the drawing buffer size (width/height attributes). For crisp rendering on retina displays, set the buffer to a multiple of the display size.
<!-- Drawing buffer is 600x400 pixels --><!-- Display size is 300x200 CSS pixels (for retina) --><canvas width="600" height="400" style="inline-size: 300px; block-size: 200px;"></canvas>High DPI / Retina
const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');const dpr = window.devicePixelRatio || 1; // Set display sizecanvas.style.width = '300px';canvas.style.height = '200px'; // Set actual size in memory (scaled for DPI)canvas.width = 300 * dpr;canvas.height = 200 * dpr; // Scale context to matchctx.scale(dpr, dpr);Accessibility
Canvas content is not accessible to screen readers by default. You must provide alternatives.
Fallback Content
Place content inside the canvas element. It's shown when canvas is unsupported and available to screen readers.
<canvas width="400" height="300"> <!-- Fallback for screen readers and non-canvas browsers --> <p>Bar chart showing quarterly sales:</p> <ul> <li>Q1: $45,000</li> <li>Q2: $52,000</li> <li>Q3: $48,000</li> <li>Q4: $61,000</li> </ul></canvas>ARIA Labels
For simple informative graphics, use role="img" with aria-label:
<canvas role="img" aria-label="Line chart showing website traffic increasing 25% over six months" width="400" height="300"></canvas>Data Tables
For complex data visualizations, provide an accessible data table nearby:
<figure> <canvas id="sales-chart" width="600" height="400" role="img" aria-label="Annual sales by region"> </canvas> <figcaption> Annual sales by region. <a href="#sales-table">View data table</a> </figcaption></figure> <table id="sales-table"> <!-- Accessible data table with the same information --></table>Best Practices
- Always provide text alternatives for informative canvas content
- Use
role="img"andaria-labelfor simple graphics - Provide data tables for charts and graphs
- Ensure interactive canvases are keyboard accessible
- Respect
prefers-reduced-motionfor animated content
CSS Reference
| Selector | Properties |
|---|---|
canvas | display: block; max-inline-size: 100%; |
canvas.full | inline-size: 100%; block-size: auto; |
canvas.fixed | inline-size: 100%; block-size: 400px; |
canvas.interactive | cursor: crosshair; |
canvas.drawing | cursor: crosshair; touch-action: none; |
canvas.bordered | border; border-radius; |
canvas.loading | Diagonal stripe background pattern |
.canvas-responsive | position: relative; aspect-ratio: 16 / 9; |
Related
<svg>— Scalable vector graphics (often better for accessibility and resolution independence)<img>— Static images<figure>— Wrap canvas with captions for charts<audio-visualizer>— VB's canvas-based audio visualization component