HTML Canvas (Reference)

Introduction

Canvas element markup and attributes define the fallback DOM surface for script-drawn graphics — width, height, role, and accessible alternatives determine whether charts are perf assets or accessibility lawsuits. Staff engineers require text/canvas aria-labelledby or parallel data table for enterprise dashboards.

Business problem

Business pressure: Canvas with no fallback is a bitmap to screen readers — blind executives cannot read revenue charts; regulators ask for accessible data export.

• Legal: WCAG 1.1.1 non-text content applies to canvas graphics.
• Perf: Full-screen canvas animations tank INP on low-end devices.
• SEO: Canvas text not indexed — critical data needs HTML nearby.

Why this feature exists

Platform motivation: Immediate mode 2D/WebGL rendering without plugin; complements SVG for game and chart use cases.

• History: Introduced HTML5; replaced Flash charts in many enterprises.
• Alternative rejected: SVG-only for million-point scatter — perf limits.
• Modern role: Paired with OffscreenCanvas in workers for heavy workloads.

Browser internals

Canvas rendering: Bitmap backing store scaled by devicePixelRatio; size attrs set coordinate space; CSS size scales display — mismatch blurs.

• Parser: canvas is replaced element; children are fallback content shown if canvas unsupported.
• DOM: getContext('2d') or webgl; context loss on GPU pressure mobile.
• Script impact: Canvas requires JS — progressive enhancement mandatory.

Rendering workflow

Canvas paint path: Each draw call can invalidate; large canvas full redraw hurts frame budget — separate layer often composited.

• Critical path: Canvas usually not LCP — unless hero misuse.
• Layout: width/height attrs reserve space — prevent CLS before JS draws.
• Paint: willReadFrequently hint for 2d context readback perf.

Feature deep dive

Canvas HTML attrs: width, height (integer pixels), id for scripting; moz-opaque legacy; presentational role options: role=img with aria-label, or role=none if decorative with alt text sibling table.

• Fallback content: Inner HTML shown when JS off — summarize chart data.
• Responsive: Resize backing store on DPR change — not just CSS stretch.
• Accessibility: Provide data table or text summary — not canvas alone.

<figure role="group" aria-labelledby="chart-title">
  <figcaption id="chart-title">Q2 Revenue by Region</figcaption>
  <canvas id="rev" width="640" height="360" role="img" aria-label="Bar chart: NA 40%, EU 35%, APAC 25%">
    <p>NA 40%, EU 35%, APAC 25% — see data table below.</p>
  </canvas>
  <table>…same data…</table>
</figure>

Accessibility analysis

Canvas a11y: WCAG requires text alternative; dynamic updates need aria-live region announcing changes; keyboard access to tooltips requires parallel HTML controls.

• Screen readers: role=img + aria-label static snapshot; live charts need periodic summary.
• Keyboard: Custom canvas UI needs focusable HTML controls overlay — not pointer-only.
• WCAG: 1.1.1 and 4.1.2 name role value for custom widgets on canvas.

SEO impact

SEO: Canvas content invisible to crawlers — duplicate key metrics in semantic HTML text nearby for indexable insights.

• Crawl: Don't put sole product price in canvas text draw.
• Rich results: Use HTML table data for Product/Offer schema source.
• Core Web Vitals: Heavy canvas JS hurts INP — lazy init below fold.

Security considerations

Canvas fingerprinting: toDataURL used for tracking — privacy concern; CSP limits script ability not canvas itself.

• XSS: Script drawing attacker-controlled text to canvas still exfil via image — treat data as untrusted.
• CSP: canvas not restricted by img-src — script governance key.
• Cross-origin: drawImage tainted canvas — export blocked — understand CORS on assets.

Performance impact

Perf: Large canvas + animate on scroll — jank; prefer CSS transform layer promotion sparingly; destroy context when offscreen.

• LCP: Don't use canvas for hero text rendering.
• INP: Debounce resize redraws; move work to worker with OffscreenCanvas.
• CLS: width/height attrs mandatory in HTML.

Real production example

Enterprise chart pattern: HTML table source of truth; canvas enhances visually; export CSV button; pa11y on table always passes.

Enterprise usage

Enterprise: BI dashboards require documented a11y fallback; canvas behind feature flag on low-power mode.

• Design system: Chart component ships table toggle view.
• CMS: Don't embed canvas in author content — scripted components only.
• CI gates: axe on figure wrapper requires table or aria-label.

Common production failures

What breaks in prod: Trading desk canvas chart sole interface — blind analyst lawsuit settlement.

• Incident: Retina DPR resize bug — blurry canvas CLS on orientation change.
• SEO regression: Pricing only drawn on canvas — no text indexation.
• Perf regression: 4k canvas full refresh each mousemove — INP disaster.

Architecture review questions

• Is equivalent data available in HTML table or text?
• Are width and height attributes set in markup?
• Does canvas have accessible name via aria-label or figcaption?
• Is canvas initialized lazily below fold?
• Is there fallback inner HTML when JS disabled?

Hands-on project

Project: Build figure with canvas bar chart + matching data table + noscript summary; axe clean.

• Deliverable: width/height set; role=img; table duplicate data.
• Verify: SR reads summary; keyboard reaches CSV link.
• Stretch: OffscreenCanvas worker draw.

Interview questions

Try it yourself

Edit the HTML, CSS, or JS panels — the preview updates as you type.

Summary

Canvas reference covers width/height markup, fallback content, role/aria patterns, and enterprise requirement for parallel accessible data — charts must not be bitmap-only to screen readers.