Gets or sets the width of a canvas element on a document.
This property is read/write.
![]() |
Syntax
| JavaScript | |
|---|
Property values
Type: Integer
The width of a canvas element, in pixels.
Standards information
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10
Examples
The following code example uses the width and height property to get and set the attributes of a canvas element on the document.
<html> <head> <title>Height example</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, canvas.width, canvas.height); } } function change(val) { var canvas = document.getElementById("MyCanvas"); canvas.width = canvas.width + val; canvas.height = canvas.height + val; draw(); } </script> </head> <body onload="draw();" > <div> <button onclick="change(10)">Make canvas 10px larger</button> <button onclick="change(-10)">Make canvas 10px smaller</button> </div> <div> <canvas id="MyCanvas" width="500" height="500" >This browser or document mode doesn't support canvas</canvas> </div> </body> </html>
See also
Build date: 11/28/2012
