Example
Draw a red square, on the fly, and show it inside the <canvas> element:
<canvas id=”myCanvas”></canvas>
<script>
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0, 0, 80, 80);
</script>
Definition and Usage
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.
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 |
Differences Between HTML 4.01 and HTML5
The <canvas> tag is new in HTML5.
Tips and Notes
Note: Any text inside the <canvas> element will be displayed in browsers that does not support <canvas>.
Tip: For a complete reference of all the properties and methods that can be used with the canvas object, go to our HTML Canvas Reference.
Attributes
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas |
| width | pixels | Specifies the width of the canvas |
Global Attributes
The <canvas> tag also supports the Global Attributes in HTML.
Event Attributes
The <canvas> tag also supports the Event Attributes in HTML.
Default CSS Settings
Most browsers will display the <canvas> element with the following default values:
HTML <canvas> height Attribute
Example
A <canvas> element with a height and width of 200 pixels:
<canvas id=”myCanvas” width=”200″ height=”200″ style=”border:1px solid”>
More “Try it Yourself” examples below.
Definition and Usage
The height attribute specifies the height of the <canvas> element, in pixels.
Tip: Use the width attribute to specify the width of the <canvas> element, in pixels.
Tip: Each time the height or width of a canvas is re-set, the canvas content will be cleared (see example at bottom of page).
Tip: Learn more about the <canvas> element in our HTML Canvas Tutorial.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
| Attribute | |||||
|---|---|---|---|---|---|
| height | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Differences Between HTML 4.01 and HTML5
The <canvas> tag is new in HTML5.
Syntax
<canvas height=”pixels“>
| Value | Description |
|---|---|
| pixels | Specifies the height of the canvas, in pixels (e.g. “100”). Default height is “150” |
More Examples
Example
Clear the canvas by setting the width or height attribute (using JavaScript):
<canvas id=”myCanvas” width=”200″ height=”200″ style=”border:1px solid”></canvas>
<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.fillStyle = “#92B901”;
ctx.fillRect(50, 50, 100, 100);
function clearCanvas() {
c.height = 300;
}
</script>
HTML <canvas> width Attribute
Example
A <canvas> element with a height and width of 200 pixels:
<canvas id=”myCanvas” width=”200″ height=”200″ style=”border:1px solid”>
More “Try it Yourself” examples below.
Definition and Usage
The width attribute specifies the width of the <canvas> element, in pixels.
Tip: Use the height attribute to specify the height of the <canvas> element, in pixels.
Tip: Each time the height or width of a canvas is re-set, the canvas content will be cleared (see example at bottom of page).
Tip: Learn more about the <canvas> element in our HTML Canvas Tutorial.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
| Attribute | |||||
|---|---|---|---|---|---|
| width | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Differences Between HTML 4.01 and HTML5
The <canvas> tag is new in HTML5.
Syntax
<canvas width=”pixels“>
