HTMLCanvasElement: width property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Value

A number.

Examples

Given this <canvas> element:

html
<canvas id="canvas" width="300" height="300"></canvas>

You can get the width of the canvas with the following code:

js
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300

Specifications

Specification
HTML
# dom-canvas-height

Browser compatibility

Report problems with this compatibility data on GitHub
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
width

Tip: you can click/tap on a cell for more information.

Full support

See also