HTML Reference Manual

HTML Tag Reference

HTML canvas height attribute

The height attribute specifies the height of the <canvas> element in pixels, and the canvas content is cleared each time the height or width of the canvas is reset.

HTML <canvas> tag

Online Examples

A <canvas> element with a height and width of200-pixel <canvas> element:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML <canvas> height Attribute Usage-Basic Tutorial(oldtoolbag.com)</title>
</<head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
</<script>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All major browsers support the height attribute.

Note: Internet Explorer 8 and earlier IE versions do not support the <canvas> tag.

Definition and Usage

The height attribute specifies the height of the <canvas> element in pixels.
Tip: Use the width attribute to specify the width of the <canvas> element in pixels.

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

Tip: Please visit our HTML Canvas Learn more about <canvas> in the HTML tutorial.

HTML 4.01 with HTML 5 differences

<canvas> is an HTML5 of the new tag.

Syntax

<canvas height="pixels">

Attribute Value

Value	Description
pixels	Specify the canvas height in pixels (for example "100px" or simply "100"). The default is "150".

More Examples

Clear the canvas by setting the width or height attribute (using JavaScript):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML <canvas> width Attribute Usage-Basic Tutorial(oldtoolbag.com)</title>
</<head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the HTML5　canvas tag.
</canvas>
<br>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
function clearCanvas() {
　　c.height =　300;
}
</<script>
<button onclick="clearCanvas()">Clear canvas</button>/button>
</body>
</html>

Test to see ‹/›

HTML <canvas> tag

HTML: <template> tag