Baseline Widely available
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.
Setting the width
property resets the entire rendering context to its default state. This includes clearing the canvas (backing buffer), resetting the current path, and resetting all properties like fillStyle
and globalCompositeOperation
. This reset occurs for all context types, and occurs even when setting width
to its current value. To restore the previous content after changing the width, use CanvasRenderingContext2D.getImageData()
and CanvasRenderingContext2D.putImageData()
. Context properties must be separately tracked and restored.
This is one of the two properties, the other being HTMLCanvasElement.height
, that controls the size of the canvas.
A number.
ExamplesGiven this <canvas>
element:
<canvas id="canvas" width="300" height="300"></canvas>
You can get the width of the canvas with the following code:
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4