Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLCanvasElement : propriété height

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La propriété height de l'interface HTMLCanvasElement est un entier positif (integer) correspondant à l'attribut HTML height de l'élément <canvas> interprété en pixels CSS. Lorsque l'attribut n'est pas défini, ou s'il est défini sur une valeur invalide (par exemple une valeur négative), la valeur par défaut 150 est utilisée.

La modification de la propriété height réinitialise l'intégralité du contexte de rendu à son état par défaut. Cela inclut le nettoyage du canevas (tampon d'arrière-plan), la réinitialisation du chemin courant et la remise à zéro de toutes les propriétés telles que fillStyle et globalCompositeOperation. Cette réinitialisation s'applique à tous les types de contexte et intervient même lorsque l'on assigne à height sa valeur actuelle. Pour restaurer le contenu précédent après avoir modifié la hauteur, utilisez CanvasRenderingContext2D.getImageData() et CanvasRenderingContext2D.putImageData(). Les propriétés du contexte doivent être gérées et restaurées séparément.

Il s'agit de l'une des deux propriétés, l'autre étant HTMLCanvasElement.width, qui contrôlent la taille du canevas.

Valeur

Un nombre.

Exemples

Étant donné cet élément <canvas> :

html
<canvas id="canvas" width="300" height="300"></canvas>

vous pouvez obtenir la hauteur du canevas avec le code suivant :

js
var canvas = document.getElementById("canvas");
console.log(canvas.height); // 300

Spécifications

Specification
HTML
# dom-canvas-height

Compatibilité des navigateurs

Voir aussi