<canvas> exposes a resolution-dependent bitmap surface controlled exclusively through JavaScript contexts (getContext('2d'), webgl, webgl2, bitmaprenderer).
<canvas id="chart" width="640" height="360" role="img" aria-label="Quarterly revenue chart">
Static summary or data table fallback when scripting is disabled.
</canvas>Capabilities
- 2D paths, images, text rendering (but text accessibility requires separate DOM strategies).
- WebGL for GPU-accelerated graphics.
- Media frames via
drawImage/transferFromImageBitmap.
Accessibility gaps
- Pixels are not semantic—mirror meaning with tables, descriptions, or ARIA live regions.
- Provide keyboard-accessible controls outside the canvas when users must interact.
Performance
- Match CSS display size to backing store resolution (
devicePixelRatio) for crisp lines. - Avoid expensive redraw loops on scroll without throttling.
What product teams forget
Canvas visuals are pixels—export to PDF/print still needs alternate representations; don’t treat charts as self-describing for accessibility.
Rendered shell (fallback + dimensions)
Without JavaScript, only the fallback text and intrinsic width/height reserve space—pair with a static chart image or data table for no-JS readers.
Draw paths, text, and images with a script using canvas.getContext('2d') or WebGL contexts.
Important interview questions and answers
- Q: Why should video/audio include fallbacks and tracks?
A: Codec support differs by browser and captions/transcripts are essential for accessibility and compliance. - Q: When is inline SVG better than bitmap icons?
A: For scalable, styleable, lightweight icons that inherit CSS and remain sharp across densities. - Q: What is a common embed risk with third-party iframes?
A: Privacy/performance overhead and policy issues; lazy-load and apply consent/security constraints where needed.
Tip: Canvas is bitmap—provide text alternatives for charts when data matters.