width property
[This documentation is preliminary and is subject to change.]
Gets or sets the width of a canvas element on a document.
  |
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.
<!DOCTYPE html>
<head>
<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()" bgcolor="lightgray" >
<div>
<button onclick="change(10)">Make canvas larger</button>
<button onclick="change(-10)">Make canvas smaller</button>
</div>
<div>
<canvas id="MyCanvas" width="500" height="500" > </canvas>
</div>
</body>
</html>
Build date: 2/14/2012
