Qu'est-ce qu'un élément canvas en HTML5?

L'élément <canvas> en HTML5 est un conteneur pour dessiner des graphiques à l'aide de scripts (généralement JavaScript). Il permet de créer des visualisations dynamiques, des jeux et des animations directement dans le navigateur sans utiliser de plugins.

Aspects clés:

• Dessin par pixels: Fonctionne au niveau des pixels, offrant un contrôle total sur chaque élément de l'image.
• Utilisation de l'API: L'interaction avec <canvas> se fait via l'API du contexte de rendu, le plus courant étant le 2d pour les graphiques bidimensionnels. Il existe aussi webgl pour la 3D.
• Toile vide: L'élément <canvas> lui-même est simplement un conteneur. Tout le dessin est effectué par programmation.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Obtenir l'élément canvas
const canvas = document.getElementById('myCanvas');

// Obtenir le contexte 2D de dessin
const ctx = canvas.getContext('2d');

// Dessiner un rectangle
ctx.fillStyle = "#FF0000"; // Couleur de remplissage
ctx.fillRect(0, 0, 150, 75); // x, y, largeur, hauteur

Les capacités incluent le dessin de:

• Formes primitives (lignes, rectangles, cercles, arcs)
• Texte
• Images
• Dégradés et motifs
• Chemins (path) pour des figures complexes