Example
A <canvas> element with a height and width of 200 pixels:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Try it Yourself »
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">
Attribute Values
| Value | Description |
|---|---|
| pixels | Specifies the width of the canvas, in pixels (e.g. "100"). Default width is "300" |
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>
Try it Yourself »