The HTMLCanvasElement.width property is a positive integer reflecting the width HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used.
This is one of the two properties, the other being HTMLCanvasElement.height, that controls the size of the canvas.
Syntax
var pxl = canvas.width; canvas.width = pxl;
Examples
Given this <canvas> element:
<canvas id="canvas" width="300" height="300"></canvas>
You can get the width of the canvas with the following code:
var canvas = document.getElementById('canvas');
console.log(canvas.width); // 300
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'HTMLCanvasElement.width' in that specification. |
Living Standard | No change since the latest snapshot, HTML5 |
| HTML 5.1 The definition of 'HTMLCanvasElement.width' in that specification. |
Recommendation | |
| HTML5 The definition of 'HTMLCanvasElement.width' in that specification. |
Recommendation | Snapshot of the HTML Living Standard containing the initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
width | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
- The interface defining it,
HTMLCanvasElement. - The other property controlling the size of the canvas,
HTMLCanvasElement.height.
