HTMLCanvasElement: width property
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.
When the width
property is set the drawing buffer is always reset to blank — this is true for all context types, and even when the width is set to the same value. If you need to restore the previous content, you can save it via CanvasRenderingContext2D.getImageData()
and restore it via CanvasRenderingContext2D.putImageData()
.
This is one of the two properties, the other being
HTMLCanvasElement.height
, that controls the size of the canvas.
Value
A number.
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:
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
Specifications
Specification |
---|
HTML Standard # dom-canvas-height |
Browser compatibility
BCD tables only load in the browser
See also
HTMLCanvasElement
: Interface used to define theHTMLCanvasElement.width
propertyHTMLCanvasElement.height
: Other property used to control the size of the canvasHTMLEmbedElement.width
HTMLIFrameElement.width
HTMLImageElement.width
HTMLObjectElement.width
HTMLSourceElement.width
HTMLVideoElement.width