Référence Canvas

L'élément HTML5 <canvas> est utilisé pour dessiner des graphiques via un script (généralement JavaScript). Cependant, l'élément <canvas> ne propose pas de fonctionnalités de dessin par lui-même. Pour dessiner des graphiques, vous devez utiliser un script, car l'élément <canvas> n'est qu'un conteneur pour les graphiques.

La méthode getContext() renvoie un objet qui expose des propriétés et des méthodes pour dessiner sur le canevas.

Couleurs, Styles et Ombres

Property	Description
fillStyle	Définit ou renvoie la couleur, le dégradé ou le motif utilisé pour remplir les formes.
strokeStyle	Définit ou renvoie la couleur, le dégradé ou le motif utilisé pour les contours des formes.
shadowColor	Définit ou renvoie la couleur des ombres.
shadowBlur	Définit ou renvoie le niveau de flou des ombres.
shadowOffsetX	Définit ou renvoie le décalage x de l'ombre.
shadowOffsetY	Définit ou renvoie le décalage y de l'ombre.

Method	Description
createLinearGradient()	Crée un dégradé linéaire à utiliser sur le contenu du canevas.
createPattern()	Répète un élément spécifique dans la direction indiquée.
createRadialGradient()	Crée un dégradé circulaire/radial à utiliser sur le contenu du canevas.
addColorStop()	Définit les couleurs et les positions d'arrêt dans l'objet dégradé.

Styles de Ligne

Property	Description
lineCap	Définit ou renvoie le style des extrémités de la ligne.
lineJoin	Définit ou renvoie le type des coins tracés.
lineWidth	Définit ou renvoie la largeur de la ligne actuelle.
miterLimit	Définit ou renvoie la longueur maximale de l'onglet.
lineDash	Définit ou renvoie un tableau de nombres spécifiant les motifs de tirets.
lineDashOffset	Définit ou renvoie le décalage pour les motifs de tirets.

Rectangles

Method	Description
rect()	Crée des rectangles.
fillRect()	Dessine des rectangles remplis.
strokeRect()	Dessine des contours rectangulaires.
clearRect()	Efface les pixels spécifiés à l'intérieur d'un rectangle donné.

Chemins

Method	Description
fill()	Remplit le(s) sous-chemin(s) actuel(s) avec le fillStyle actuel.
stroke()	Trace le(s) sous-chemin(s) actuel(s) avec le strokeStyle actuel.
beginPath()	Démarre un nouveau chemin ou réinitialise le chemin actuel.
moveTo()	Déplace le chemin vers le point défini dans le canevas sans tracer de ligne.
closePath()	Ajoute un chemin du point actuel au point de départ.
lineTo()	Ajoute une ligne au sous-chemin actuel.
clip()	Crée une zone de découpage à partir du chemin actuel.
quadraticCurveTo()	Ajoute une courbe de Bézier quadratique.
bezierCurveTo()	Ajoute une courbe de Bézier cubique.
arc()	Ajoute un arc/courbe pour créer des cercles ou des parties de cercles.
arcTo()	Ajoute un arc/courbe entre deux tangentes.
isPointInPath()	Définit si le point spécifié se trouve dans le chemin actuel ou non.

Transformations

Method	Description
scale()	Agrandit ou réduit le dessin actuel.
rotate()	Fait pivoter le dessin actuel.
translate()	Ajuste le système de coordonnées du canevas.
transform()	Applique une matrice de transformation au canevas.
setTransform()	Similaire à transform(). Peut être utilisé pour incliner, mettre à l'échelle et translater le canevas.

Texte

Property	Description
font	Définit l'apparence du texte dessiné sur le canevas.
textAlign	Définit l'alignement du texte dessiné sur le canevas.
textBaseline	Définit l'alignement vertical du texte dessiné sur le canevas.

Method	Description
fillText()	Ajoute du texte au canevas.
strokeText()	Ajoute du texte en contour au canevas.
measureText()	Mesure la largeur du texte.

Dessin d'Images

Method	Description
drawImage()	Dessine une image, une vidéo ou un canevas sur le canevas.

Manipulation de Pixels

Property	Description
width	Renvoie la largeur d'un objet ImageData.
height	Renvoie la hauteur d'un objet ImageData.
data	Renvoie un Uint8ClampedArray contenant les données des pixels.

Method	Description
createImageData()	Crée un nouvel objet ImageData.
getImageData()	Renvoie un objet ImageData qui copie les données des pixels pour le rectangle spécifié.
putImageData()	Place les données de l'image sur le canevas à partir de l'objet ImageData.

Composition

Property	Description
globalAlpha	Définit ou renvoie la valeur alpha/transparence actuelle.
globalCompositeOperation	Définit ou renvoie le type d'opération de composition lors du dessin d'une nouvelle image.

Autres

Method	Description
save()	Enregistre l'état actuel d'un contexte.
restore()	Restaure l'état du chemin et les attributs enregistrés précédemment.

Remarque : getContext() et toDataURL() sont des méthodes de l'élément <canvas> lui-même, et non du contexte de dessin.

Pratique