<canvas>
The canvas element provides a bitmap drawing surface scripted via the Canvas 2D or WebGL APIs.
Syntax
<canvas width="300" height="150"></canvas>Examples
<canvas id="c" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
ctx.fillStyle = 'tomato';
ctx.fillRect(10, 10, 120, 60);
</script>
Output
Renders a 200x100 surface with a tomato-colored rectangle drawn on it.
Notes
Set the drawing buffer via the width/height attributes, not CSS, to avoid blur. Canvas content is not accessible by default; provide fallback content or an ARIA description.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 4.0 |
| firefox | 3.5 |
| safari | 3.1 |
| edge | 12 |