web api instance property
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.
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 getImageData() and putImageData(). Context properties must be separately tracked and restored.
This is one of the two properties, the other being
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