<canvas>: The CANVAS Element
Last updated: 2026-10-13
<canvas>The CANVAS Element
Draws graphics, animation or charts via JavaScript (2D or WebGL); the tag is just a blank canvas filled by script.
| Category | Scripts & Embedding |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </canvas> tag |
| Status | Standard |
📝 Syntax
<canvas width="300" height="150"></canvas>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
width | Canvas width in pixels, default 300. | |
height | Canvas height in pixels, default 150. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <canvas> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： canvas can't draw by itself—use getContext in JS; combine with CSS scaling for HiDPI.
❓ FAQ
QWhat is the difference between canvas and SVG?
A
<canvas> is bitmap drawing: JS paints pixels frame by frame — ideal for games, large element counts, and real-time filters, but it blurs when scaled. SVG is vector: DOM nodes describe shapes, scale losslessly, and fit icons and charts. High-frequency pixel painting picks canvas; interactive vector graphics pick SVG.QWhy should canvas size not be set with CSS alone?
ACanvas has two sizes: the HTML
width/height attributes set the pixel buffer (default 300×150) while CSS size only stretches the display. Changing CSS alone stretches and blurs the buffer — set the attributes and CSS together, or scale by devicePixelRatio.QWill canvas content be indexed by search engines?
ANo — the inside of a canvas is pixels with no text or DOM to crawl. Important text must live outside the canvas (headings, descriptions, accessibility alternatives), and complex apps should provide DOM fallback content inside the tag.
🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
