TheHTMLCanvasElement.width property is apositiveinteger reflecting thewidth HTMLattribute of the<canvas> element interpreted in CSS pixels. When theattribute is not specified, or if it is set to an invalid value, like a negative, thedefault value of300 is used.

Setting thewidth property resets the entire rendering context to its default state. This includes clearing the canvas (backing buffer), resetting the current path, and resettingall properties likefillStyle andglobalCompositeOperation. This reset occurs for all context types, and occurs even when settingwidth to its current value. To restore the previous content after changing the width, useCanvasRenderingContext2D.getImageData() andCanvasRenderingContext2D.putImageData(). Context properties must be separately tracked and restored.

This is one of the two properties, the other beingHTMLCanvasElement.height, that controls the size of the canvas.

Value

A number.

Examples

Given this<canvas> element:

<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

• HTMLCanvasElement: Interface used to define theHTMLCanvasElement.width property
• HTMLCanvasElement.height: Other property used to control the size of the canvas
• HTMLEmbedElement.width
• HTMLIFrameElement.width
• HTMLImageElement.width
• HTMLObjectElement.width
• HTMLSourceElement.width
• HTMLVideoElement.width