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
Que peut faire la méthode getContext('2d') dans le Canvas HTML5 ?