HTML <canvas> height eigenschap

HTML <canvas> Tag

Definitie en gebruik

Height De eigenschap bepaalt de hoogte van het <canvas> element in pixels.

Hint

Gebruik Width eigenschap Specificeer de breedte van het <canvas> element in pixels.

Bij elke herinstelling van de hoogte of breedte van het canvas, wordt de inhoud van het canvas gewist (zie het voorbeeld aan de onderkant van de pagina).

Graag onze HTML Canvas tutorial Ler meer over de <canvas> elementen in onze

Voorbeeld

Voorbeeld 1

Een <canvas> element van 200 bij 200 pixels in hoogte en breedte:

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

Try it yourself

Voorbeeld 2

Door de hoogte-eigenschap in te stellen op 300px, kan het canvas worden schoongemaakt (gebruik 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 Specify the canvas height in pixels (for example, “100” ). The default value is 150.

Browser support

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

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

HTML <canvas> Tag