<canvas> Canvas
A bitmap surface that JavaScript draws graphics on.
<canvas> is an empty bitmap for JavaScript to draw on. Games, charts and image editors use it. Size it with the width and height attributes, because scaling it only with CSS blurs the drawing.
With no script, a canvas stays blank, which is what you see in this course's preview. Screen readers cannot see what is drawn, so add a text alternative between the tags or next to the canvas. Static vector graphics are often better done in SVG.
The full 2D drawing API, with its accessibility warnings, is in the canvas element definition (opens in a new tab). Compare it with the svg element.
Syntax
<canvas width="300" height="150">
Text alternative
</canvas>When to use it
Browser games, particle effects, photo filters, signature pads, charts with thousands of points, WebGL 3D scenes. All of them need a script that paints lots of pixels fast, and that is the job of <canvas>. What you draw turns into plain pixels. Once it is painted, the browser has no idea there was ever a circle or a label.
A few shapes, icons, a logo or a bar chart with a dozen bars are better in svg. The shapes stay in the page, scale sharply, take CSS and can carry links and titles. A static picture is easier still as an img.
Whatever you put between the canvas tags matters for more than ancient browsers. With scripting off, browsers show it in place of the canvas. And when the canvas holds interactive controls, real focusable elements inside it (buttons, links) give keyboard and screen reader users the same actions. Write that content as a working alternative. An error message helps nobody.
Attributes
| Attribute | What it does |
|---|---|
width | Width of the drawing surface in pixels (default 300). |
height | Height of the drawing surface in pixels (default 150). |
Live example
Edit the code and watch the preview.
<canvas width="300" height="150" style="border:1px solid #999">
A chart of monthly sales: January 10, February 14, March 9.
</canvas>
<p>A script would draw inside the box above.</p>More examples
Seat map with real links
A script would draw the seat map. The fallback is a working alternative: a one-line summary and a link to a plain list of seats. Visitors without scripts see it where the drawing would be.
<canvas width="320" height="160" style="border:1px solid #999">
<p>Seat map for Hall A: 12 of 80 seats are free.</p>
<p><a href="/seats/hall-a/">Choose your seat from a list</a></p>
</canvas>Chart with a table fallback
The numbers behind the canvas chart go inside it as a small table. Screen reader users and visitors with scripts off get the same figures the drawing would have shown.
<canvas width="300" height="150">
<table>
<caption>Visitors per month</caption>
<tr><th scope="col">Month</th><th scope="col">Visitors</th></tr>
<tr><td>January</td><td>1,200</td></tr>
<tr><td>February</td><td>1,450</td></tr>
<tr><td>March</td><td>980</td></tr>
</table>
</canvas>Tip: Anything drawn on a canvas needs a text alternative.
Browser support
Every current browser supports canvas and its 2D drawing API, and WebGL for 3D works nearly everywhere. Some newer features came later to some browsers, OffscreenCanvas (drawing in a background worker) for one. The canvas support table (opens in a new tab) covers the basics.
Accessibility
Screen readers get nothing from canvas pixels. Supply an equivalent text description or a data table, and build interactive controls from real HTML elements instead of drawing them. Equivalent alternatives are explained in the W3C note Understanding Non-text Content (opens in a new tab).
Common mistakes
Wrong
<canvas id="chart" style="width:600px;height:400px"></canvas>Right
<canvas id="chart" width="600" height="400">Sales grew 20 percent in 2026.</canvas>Size the buffer with attributes and put fallback content inside that describes the graphic.
Frequently asked questions
Why is my canvas drawing blurry?
The buffer and the display size do not match. The width and height attributes set the drawing buffer in pixels; CSS only scales what is displayed. When CSS makes the canvas bigger than its buffer, or the screen has a high pixel density, the image gets stretched. For sharp output, multiply the buffer size by window.devicePixelRatio and scale the context to match.
Should I use canvas or SVG for graphics?
Pick SVG for a moderate number of shapes: icons, diagrams and charts that should scale cleanly and that you can style and make accessible like normal elements. Pick <canvas> for thousands of moving objects, games, image processing and pixel-level effects. Its output is only pixels, though, and assistive technology and search engines cannot see it. Wikipedia's canvas element (opens in a new tab) article covers its history and uses.