HTML <canvas> hauteur Attribut

❮ HTML <canvas> tag

Exemple

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

<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Essayez-le vous-même »

Plus d'exemples "Essayez-le vous-même" ci-dessous.


Définition et Utilisation

L'attribut height spécifie la hauteur de l'élément <canvas> , en pixels.

Astuce : Utilisez l'attribut width pour spécifier la largeur de l'élément <canvas> , en pixels.

Astuce : Chaque fois que la hauteur ou la largeur d'un canvas est réinitialisée, le contenu du canvas sera effacé (voir l'exemple en bas de la page).

Astuce : En savoir plus sur l'élément <canvas> dans notre Tutoriel HTML Canvas .


Support des Navigateurs

Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'attribut.

Attribut
height 4.0 9.0 2.0 3.1 9.0

Syntaxe

<canvas height=" pixels ">


Valeurs des Attributs

Valeur Description
pixels Spécifie la hauteur du canvas, en pixels (par exemple "100"). La valeur par défaut est 150.

Plus d'Exemples

Exemple

Effacez le canvas en définissant l'attribut height à 300px (en utilisant JavaScript) :

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

<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50, 50, 100, 100);

function clearCanvas() {
c.height = 300;
}
</script>
Essayez-le vous-même »

❮ HTML <canvas> tag