<canvas>
The <canvas> element provides a scriptable drawing surface for graphics, charts, games, and custom rendering. Its contents are generated dynamically rather than represented as standard DOM content.
Overview
The <canvas> element provides a scriptable drawing surface for graphics, charts, games, and custom rendering. Its contents are generated dynamically rather than represented as standard DOM content.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 2 | 18 | 1 | |
| HTML attribute | ||||||
height | 1 | 12 | 1.5 | 2 | 18 | 1 |
width | 1 | 12 | 1.5 | 2 | 18 | 1 |
| DOM API | ||||||
| The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of canvas elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface. | 1 | 12 | 1.5 | 2 | 18 | 1 |
| The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode. | 1 | 12 | 1.5 | 2 | 18 | 1 |
| The HTMLCanvasElement.height property is a positive integer reflecting the height HTML attribute of the canvas element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used. | 1 | 12 | 1.5 | 3 | 18 | 1 |
| The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas. This file may be cached on the disk or stored in memory at the discretion of the user agent. | 50 | 79 | 18 | 11 | 50 | 11 |
| The HTMLCanvasElement.toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter. | 2 | 12 | 2 | 4 | 18 | 3 |
| The HTMLCanvasElement.width property is a positive integer reflecting the width HTML attribute of the canvas element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used. | 1 | 12 | 1.5 | 3 | 18 | 1 |
- Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
- Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
- Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
- Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
- Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
- Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
- Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
- Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
- Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
- Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
- Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
- Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
- This feature was removed in a later browser version (79)
- Available with a vendor prefix: ms (12)
Syntax
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 80);
ctx.fillStyle = '#e74c3c';
ctx.beginPath();
ctx.arc(200, 75, 40, 0, Math.PI * 2);
ctx.fill();
</script>Live demo
Draw shapes
Rectangle, circle, triangle draw.color or coordinates Try changing it.. with Canvas API
Gradients and paths
lineargradient and curvelinepath combinationdraw.color changeTry changing it..
Use cases
Custom charts and visuals
Render data displays or interactive graphics that need pixel-level control.
Dynamic rendering surfaces
Build game views, drawing tools, or highly interactive visualizations.
Cautions
- Canvas content is not inherently semantic, so meaning and controls must be exposed through surrounding UI.
- High-frequency rendering can be performance-intensive on lower-powered devices.
Accessibility
- Provide accessible fallback content, labels, and equivalent information when the canvas output carries meaning.
Related links
Powered by web-features