HTML <canvas> Tag
Example
Draw a red rectangle on the fly, and show it inside the <canvas> element:
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is transparent, and
is only a container for graphics, you must use a script to actually draw the graphics.
Any text inside the <canvas> element will be displayed in browsers
with JavaScript disabled and in browsers that do not support <canvas>.
Tips and Notes
Tip: Learn more about the <canvas> element in our
HTML Canvas Tutorial.
Tip: For a complete reference of all the properties and methods, please visit our HTML Canvas Reference.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Attributes
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
Global Attributes
The <canvas> tag also supports the Global Attributes in HTML.
Event Attributes
The <canvas> tag also supports the Event Attributes in HTML.
More Examples
Example
Another <canvas> example:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Try it Yourself »
Default CSS Settings
Most browsers will display the <canvas> element with the following default values:
