HTML <canvas> height attribute

HTML <canvas> Tag

Definition and Usage

height The height attribute specifies the height of the <canvas> element in pixels.

Tips

Please use width attribute Specify the width of the <canvas> element in pixels.

The canvas content will be cleared each time the height or width of the canvas is reset (see the example at the bottom of the page).

Please see our HTML Canvas Tutorial Learn more about the <canvas> element here.

Instance

Example 1

A <canvas> element with height and width both 200 pixels:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

Try It Yourself

Example 2

By setting the height attribute to 300px, clear the canvas (using JavaScript):

<canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
  c.height = 400;
}
</script>

Try It Yourself

Syntax

<canvas height="pixels">

Attribute Value

Value Description
pixels Specifies the height of the canvas in pixels (e.g., “100”). The default value is 150.

Browser Support

The numbers in the table indicate the first browser version to fully support this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

HTML <canvas> Tag