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

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⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

L'interface HTMLCanvasElement fournit des propriétés et des méthodes pour manipuler la disposition et la présentation des éléments HTML <canvas>. L'interface HTMLCanvasElement hérite également des propriétés et des méthodes de l'interface HTMLElement.

EventTarget Node Element HTMLElement HTMLCanvasElement

Propriétés d'instance

Hérite des propriétés de son parent, HTMLElement.

HTMLCanvasElement.height

L'attribut HTML height de l'élément <canvas> est un entier non négatif reflétant le nombre de pixels logiques (ou valeurs RGBA) descendant d'une colonne du canevas. 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. Si aucune hauteur CSS [separate] n'est assignée au <canvas>, cette valeur sera également utilisée comme hauteur du canevas en pixels CSS.

HTMLCanvasElement.width

L'attribut HTML width de l'élément <canvas> est un entier non négatif reflétant le nombre de pixels logiques (ou valeurs RGBA) parcourant une rangée du canevas. 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 300 est utilisée. Si aucune largeur CSS [separate] n'est assignée au <canvas>, cette valeur sera également utilisée comme largeur du canevas en pixels CSS.

HTMLCanvasElement.mozOpaque Non standard Obsolète

Une valeur booléenne reflétant l'attribut HTML moz-opaque de l'élément <canvas>. Elle indique au canevas si la translucidité sera prise en compte ou non. Si le canevas sait qu'il n'y a pas de translucidité, les performances de rendu peuvent être optimisées. Ceci n'est pris en charge que par les navigateurs basés sur Mozilla ; utilisez plutôt la méthode standardisée canvas.getContext('2d', { alpha: false }).

HTMLCanvasElement.mozPrintCallback Non standard

Une fonction initialement nulle. Le contenu Web peut définir cette propriété sur une fonction JavaScript qui sera appelée lorsque le canevas doit être redessiné pendant l'impression de la page. Lors de l'appel, la fonction de rappel reçoit un objet "printState" qui implémente l'interface MozCanvasPrintState (angl.). La fonction de rappel peut obtenir le contexte de dessin depuis l'objet printState et doit ensuite appeler done() dessus lorsqu'elle a terminé. L'objectif de mozPrintCallback est d'obtenir un rendu à plus haute résolution du canevas, adapté à la résolution de l'imprimante utilisée. Voir cet article de blog (angl.)

Méthodes d'instance

Hérite des méthodes de son parent, HTMLElement.

HTMLCanvasElement.captureStream()

Retourne un CanvasCaptureMediaStreamTrack qui est une capture vidéo en temps réel de la surface du canevas.

HTMLCanvasElement.getContext()

Retourne un contexte de dessin sur le canevas, ou null si l'identifiant de contexte n'est pas pris en charge, ou si le canevas a déjà été configuré pour un autre mode de contexte.

HTMLCanvasElement.toDataURL()

Retourne une data-URL contenant une représentation de l'image au format défini par le paramètre type (par défaut png). L'image retournée est à une résolution de 96 dpi.

HTMLCanvasElement.toBlob()

Crée un objet Blob représentant l'image contenue dans le canevas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire à la discrétion de l'agent utilisateur.

HTMLCanvasElement.transferControlToOffscreen()

Transfère le contrôle à un objet OffscreenCanvas, soit sur le thread principal, soit sur un worker.

Évènements

Hérite des évènements de son parent, HTMLElement.

Écoutez ces évènements en utilisant addEventListener() ou en assignant un gestionnaire d'évènement à la propriété oneventname de cette interface.

contextlost

Déclenché si le navigateur détecte que le contexte CanvasRenderingContext2D a été perdu.

contextrestored

Déclenché si le navigateur restaure avec succès un contexte CanvasRenderingContext2D.

webglcontextcreationerror

Déclenché si l'agent utilisateur est incapable de créer un contexte WebGLRenderingContext ou WebGL2RenderingContext.

webglcontextlost

Déclenché si l'agent utilisateur détecte que le tampon de dessin associé à un objet WebGLRenderingContext ou WebGL2RenderingContext a été perdu.

webglcontextrestored

Déclenché si l'agent utilisateur restaure le tampon de dessin pour un objet WebGLRenderingContext ou WebGL2RenderingContext.

Spécifications

Specification
HTML
# htmlcanvaselement

Compatibilité des navigateurs

Voir aussi

  • L'élément HTML implémentant cette interface : <canvas>