Purpose and content model
Canvas provides a bitmap drawing surface controlled through a rendering context. The HTML element defines the surface; JavaScript draws into it. Drawing a rectangle or text does not create corresponding semantic HTML nodes that a screen reader can navigate. Use canvas when pixel-based graphics, visualizations, or similar rendering needs justify that trade-off.
Canvas has fallback content, and its content model is transparent subject to its context. Meaningful information should also exist in an accessible representation, such as a description, data table, or ordinary controls associated with the visualization.
Syntax and working example
<canvas id="chart" width="480" height="240" aria-label="Two bars: 40 and 70 books borrowed">
<p>Monday: 40 books. Tuesday: 70 books.</p>
</canvas>
<script>
const ctx = document.querySelector("#chart").getContext("2d");
ctx.fillStyle = "#147d64";
ctx.fillRect(40, 120, 100, 80);
ctx.fillRect(200, 60, 100, 140);
</script>Supported attributes and behavior
Width and height set the backing bitmap dimensions. CSS width and height set its displayed size; using only CSS can stretch or blur the bitmap. Changing the width or height attribute resets the drawing state and clears the surface. Global attributes can supply a name or relationships, but role and aria-label alone do not expose every data point in a complex chart.
Another practical pattern
<table>
<caption>Books borrowed</caption>
<tr><th scope="col">Day</th><th scope="col">Books</th></tr>
<tr><th scope="row">Monday</th><td>40</td></tr>
<tr><th scope="row">Tuesday</th><td>70</td></tr>
</table>Accessibility and browser notes
A visible data table can give everyone an exact alternative to a chart. Interactive canvas controls need equivalent keyboard interaction and a meaningful focus model. Respect reduced-motion preferences for animations and avoid communicating results exclusively through color or spatial position.
Common mistakes
Do not assume text drawn with fillText becomes normal selectable text. Cross-origin image drawing can taint a canvas and prevent pixel reads or export unless suitable CORS conditions are met. A bigger CSS box does not automatically increase resolution.
Verify your implementation
Test the chart without seeing it, using the alternative representation. Resize and zoom to check crispness. If export is offered, test it after drawing every supported resource type and handle failures clearly rather than assuming toDataURL always succeeds.
Standard status and sources
Standard; browser availability must be checked independently of specification status.