HTMLCanvasElement : propriété width
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é width de l'interface HTMLCanvasElement est un entier positif reflétant l'attribut HTML width de l'élément HTML <canvas> interprété en pixels CSS. Lorsque l'attribut n'est pas défini, ou s'il est défini sur une valeur invalide, comme une valeur négative, la valeur par défaut 300 est utilisée.
Définir la propriété width réinitialise tout le contexte de rendu à son état par défaut. Cela inclut l'effacement du canevas (tampon de fond), la réinitialisation du chemin courant, et la réinitialisation de toutes les propriétés comme fillStyle et globalCompositeOperation. Cette réinitialisation a lieu pour tous les types de contexte, même lorsque width est défini à sa valeur courante. Pour restaurer le contenu précédent après modification de la largeur, utilisez CanvasRenderingContext2D.getImageData() et CanvasRenderingContext2D.putImageData(). Les propriétés du contexte doivent être suivies et restaurées séparément.
Il s'agit de l'une des deux propriétés, l'autre étant HTMLCanvasElement.height, qui contrôlent la taille du canevas.
Valeur
Un nombre.
Exemples
Étant donné cet élément HTML <canvas> :
<canvas id="canvas" width="300" height="300"></canvas>
Vous pouvez obtenir la largeur du canevas avec le code suivant :
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
Spécifications
| Specification |
|---|
| HTML # dom-canvas-height |
Compatibilité des navigateurs
Voir aussi
HTMLCanvasElement: Interface définissant la propriétéHTMLCanvasElement.width- Autre propriété permettant de contrôler la taille du canevas :
HTMLCanvasElement.height - La propriété
HTMLEmbedElement.width - La propriété
HTMLIFrameElement.width - La propriété
HTMLImageElement.width - La propriété
HTMLObjectElement.width - La propriété
HTMLSourceElement.width - La propriété
HTMLVideoElement.width