Référence Canvas HTML
L'élément <canvas> définit une zone bitmap dans une page HTML.
L' API Canvas permet à JavaScript de dessiner des graphiques sur le canvas.
L'API Canvas peut dessiner des formes, des lignes, des courbes, des rectangles, du texte et des images, avec des couleurs, des rotations, des transparences et d'autres manipulations de pixels.
Vous pouvez ajouter un élément <canvas> n'importe où dans une page HTML :
Exemple
<canvas id="myCanvas" width="300" height="150"></canvas> Vous pouvez accéder à un élément <canvas> avec la méthode DOM HTML getElementById() .
Pour dessiner sur le canvas, vous devez créer un objet contexte 2D :
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d"); Remarque
L'élément HTML <canvas> lui-même n'a pas de capacités de dessin.
Vous devez utiliser JavaScript pour dessiner des graphiques.
La méthode getContext() retourne un objet avec des outils (méthodes) pour dessiner.
Dessin sur le Canvas
Après avoir créé un contexte 2D, vous pouvez dessiner sur le canvas.
La méthode fillRect() dessine un rectangle noir avec un coin supérieur gauche à la position 20,20. Le rectangle mesure 150 pixels de large et 100 pixels de haut.
Exemple
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
Utilisation des Couleurs
La propriété fillStyle définit la couleur de remplissage de l'objet de dessin :
Exemple
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Vous pouvez également créer un nouvel élément <canvas> avec la méthode document.createElement() , et ajouter cet élément à une page HTML existante :
Exemple
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Chemins
La façon courante de dessiner sur le canvas est de :
- Commencer un chemin - beginPath()
- Se déplacer vers un point - moveTo()
- Dessiner dans le chemin - lineTo()
- Dessiner le chemin - stroke()
Exemple
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke(); Référence Complète de l'API Canvas
Cette référence couvre toutes les Propriétés et Méthodes de l'objet getContext("2d"), utilisé pour dessiner du texte, des lignes, des rectangles, des cercles, des images, et plus encore sur le canvas.
Méthodes de Dessin
Il n'y a que 3 méthodes pour dessiner directement sur le canvas :
| Méthode | Description |
|---|---|
| fillRect() | Dessine un rectangle "rempli" |
| strokeRect() | Dessine un rectangle (sans remplissage) |
| clearRect() | Efface les pixels spécifiés dans un rectangle |
Méthodes de Chemin
| Méthode | Description |
|---|---|
| beginPath() | Commence un nouveau chemin ou réinitialise le chemin actuel |
| closePath() | Ajoute une ligne au chemin depuis le point actuel jusqu'au début |
| isPointInPath() | Retourne vrai si le point spécifié est dans le chemin actuel |
| moveTo() | Déplace le chemin vers un point dans le canvas (sans dessiner) |
| lineTo() | Ajoute une ligne au chemin |
| fill() | Remplit le chemin actuel |
| rect() | Ajoute un rectangle au chemin |
| stroke() | Dessine le chemin actuel |
| Cercles et Courbes | |
| bezierCurveTo() | Ajoute une courbe de Bézier cubique au chemin |
| arc() | Ajoute un arc/courbe (cercle, ou parties d'un cercle) au chemin |
| arcTo() | Ajoute un arc/courbe entre deux tangentes au chemin |
| quadraticCurveTo() | Ajoute une courbe de Bézier quadratique au chemin |
Texte
| Méthode/Propriété | Description |
|---|---|
| direction | Définit ou retourne la direction utilisée pour dessiner du texte |
| fillText() | Dessine du texte "rempli" sur le canvas |
| font | Définit ou retourne les propriétés de police pour le contenu textuel |
| measureText() | Retourne un objet qui contient la largeur du texte spécifié |
| strokeText() | Dessine du texte sur le canvas |
| textAlign | Définit ou retourne l'alignement pour le contenu textuel |
| textBaseline | Définit ou retourne la ligne de base du texte utilisée lors du dessin du texte |
Couleurs, Styles et Ombres
| Méthode/Propriété | Description |
|---|---|
| addColorStop() | Spécifie les couleurs et les positions d'arrêt dans un objet dégradé |
| createLinearGradient() | Crée un dégradé linéaire (à utiliser sur le contenu du canvas) |
| createPattern() | Répète un élément spécifié dans la direction spécifiée |
| createRadialGradient() | Crée un dégradé radial/circulaire (à utiliser sur le contenu du canvas) |
| fillStyle | Définit ou retourne la couleur, le dégradé ou le motif utilisé pour remplir le dessin |
| lineCap | Définit ou retourne le style des extrémités pour une ligne |
| lineJoin | Définit ou retourne le type de coin créé lorsque deux lignes se rencontrent |
| lineWidth | Définit ou retourne la largeur de ligne actuelle |
| miterLimit | Définit ou retourne la longueur maximale de la jointure |
| shadowBlur | Définit ou retourne le niveau de flou pour les ombres |
| shadowColor | Définit ou retourne la couleur à utiliser pour les ombres |
| shadowOffsetX | Définit ou retourne la distance horizontale de l'ombre par rapport à la forme |
| shadowOffsetY | Définit ou retourne la distance verticale de l'ombre par rapport à la forme |
| strokeStyle | Définit ou retourne la couleur, le dégradé ou le motif utilisé pour les contours |
Transformations
| Méthode | Description |
|---|---|
| scale() | Redimensionne le dessin actuel pour le rendre plus grand ou plus petit |
| rotate() | Fait pivoter le dessin actuel |
| translate() | Remappe la position (0,0) sur le canvas |
| transform() | Remplace la matrice de transformation actuelle pour le dessin |
| setTransform() | Réinitialise la transformation actuelle à la matrice identité, puis exécute transform() |
Dessin d'Image
| Méthode | Description |
|---|---|
| drawImage() | Dessine une image, un canvas ou une vidéo sur le canvas |
L'objet ImageData / Manipulation de Pixels
| Méthode/Propriété | Description |
|---|---|
| createImageData() | Crée un nouvel objet ImageData vierge |
| getImageData() | Retourne un objet ImageData qui copie les données de pixels pour le rectangle spécifié sur un canvas |
| ImageData.data | Retourne un objet contenant les données d'image d'un objet ImageData spécifié |
| ImageData.height | Retourne la hauteur d'un objet ImageData |
| ImageData.width | Retourne la largeur d'un objet ImageData |
| putImageData() | Remet les données d'image (d'un objet ImageData spécifié) sur le canvas |
Composition
| Propriété | Description |
|---|---|
| globalAlpha | Définit ou retourne la valeur alpha ou de transparence actuelle du dessin |
| globalCompositeOperation | Définit ou retourne comment une nouvelle image est dessinée sur une image existante |
Autres Méthodes
createEvent()| Méthode | Description |
|---|---|
| clip() | Coupe une région de n'importe quelle forme et taille du canvas d'origine |
| save() | Sauvegarde l'état du contexte de dessin actuel et tous ses attributs |
| restore() | Restaure l'état et les attributs précédemment sauvegardés |
| getContext() | |
| toDataURL() |
Propriétés et Événements Standards
L'objet canvas prend également en charge les propriétés et événements standards.
Pages Associées
Tutoriel Canvas : Tutoriel Canvas
Tutoriel HTML : HTML5 Canvas
Référence HTML : balise HTML <canvas>
Support des Navigateurs
L'élément <canvas> est une norme HTML5 (2014).
L' API Canvas est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |