Propriété height de l'HTML <canvas>

Définition et utilisation

height La propriété définit la hauteur de l'élément <canvas> en pixels.

Avis

Utilisez Propriété width Définir la largeur de l'élément <canvas> en pixels.

Lorsque vous réinitialisez la hauteur ou la largeur du canevas, le contenu du canevas est effacé (voir l'exemple en bas de page).

Veuillez consulter nos Tutoriel HTML Canvas Pour en apprendre davantage sur l'élément <canvas>.

Exemple

Exemple 1

Un élément <canvas> de 200 pixels de largeur et de hauteur :

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

Essayez-le vous-même

Exemple 2

En définissant la propriété de hauteur sur 300px, vous pouvez effacer le canevas (en utilisant 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>

Essayez-le vous-même

Syntaxe

<canvas height="pixels">

Valeur de l'attribut

Valeur Description
pixels Définir la hauteur du canevas, en pixels (par exemple, "100"). La valeur par défaut est 150.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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