API Canvas

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 peut 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 un é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> à l'aide de 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 tout graphique.

La méthode getContext() 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

Utiliser une 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 utiliser la méthode document.createElement() pour créer un nouvel élément <canvas> 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