Firefox Tomorrow

web api instance property

HTMLCanvasElement: height property

View on MDN ↗

The HTMLCanvasElement.height property is a positive integer reflecting the height 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 150 is used.

Setting the height 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 height to its current value. To restore the previous content after changing the height, use getImageData() and putImageData(). Context properties must be separately tracked and restored.

This is one of the two properties, the other being width, 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 height of the canvas with the following code:

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

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also