HTMLCanvasElement: height 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.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 CanvasRenderingContext2D.getImageData() and CanvasRenderingContext2D.putImageData(). Context properties must be separately tracked and restored.
This is one of the two properties, the other being
HTMLCanvasElement.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
| Specification |
|---|
| HTML # dom-canvas-height |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
height
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
HTMLCanvasElement: Interface used to define theHTMLCanvasElement.heightpropertyHTMLCanvasElement.width: Other property used to control the size of the canvasHTMLEmbedElement.heightHTMLIFrameElement.heightHTMLImageElement.heightHTMLObjectElement.heightHTMLSourceElement.heightHTMLVideoElement.height