Objet Canvas du DOM 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 canevas.

L'API Canvas permet de dessiner des formes, des lignes, des courbes, des boîtes, du texte et des images, ainsi que des opérations sur les couleurs, la rotation, la transparence et d'autres opérations sur les pixels.

Ajouter Canvas à HTML

Vous pouvez ajouter l'élément canvas à n'importe quel endroit dans une page HTML en utilisant la balise <canvas> :

Exemple

<canvas id="myCanvas" width="300" height="150"></canvas>

Essayez-le vous-même

Comment accéder à l'élément Canvas

Vous pouvez accéder à l'élément <canvas> en utilisant la méthode HTML DOM getElementById() :

const myCanvas = document.getElementById("myCanvas");

Pour dessiner sur le canevas, vous devez créer un objet contexte 2D :

const ctx = myCanvas.getContext("2d");

Remarque

L'élément HTML <canvas> n'a pas de fonctionnalité de dessin.

Vous devez utiliser JavaScript pour dessiner n'importe quel graphique.

La méthode getContextMenu() retourne un objet avec des outils de dessin (méthodes).

Dessiner sur le canevas

Après avoir créé l'objet contexte 2D, vous pouvez dessiner sur le canevas.

La méthode fillRect() ci-dessous dessine un rectangle noir whose coin supérieur gauche est à la position 20,20. Le rectangle a une largeur de 150 pixels et une hauteur de 100 pixels :

Exemple

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Essayez-le vous-même

En utilisant la couleur

L'attribut 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);

Essayez-le vous-même

Vous pouvez également créer un nouvel élément <canvas> à l'aide de la méthode document.createElement() et l'ajouter à 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);

Essayez-le vous-même

Chemin

Les méthodes courantes pour dessiner sur le canevas sont :

1. Commencer un chemin - beginPath()
2. Déplacer à un point - moveTo()
3. Dessiner dans le chemin - lineTo()
4. Dessiner un 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();

Essayez-le vous-même