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.

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:

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 Standard
# dom-canvas-height

Browser compatibility

BCD tables only load in the browser

See also