Apprends à utiliser l'élément HTML Canvas pour dessiner des formes, du texte et des graphiques de manière programmatique en utilisant JavaScript et le contexte de rendu 2D.
L'élément <canvas> fournit une surface de dessin bitmap que tu contrôles entièrement avec JavaScript. Contrairement au SVG (qui utilise des éléments DOM pour chaque forme), Canvas te donne une grille de pixels vierge et une API de dessin.
Canvas est idéal pour :
Le compromis : le contenu Canvas ne fait pas partie du DOM, il n'est donc pas directement accessible aux lecteurs d'écran ni indexable par les moteurs de recherche. Tu dois fournir un contenu de secours et des attributs ARIA.
L'élément <canvas> a deux systèmes de dimensions importants :
width et height — Définissent la résolution de la surface de dessin (en pixels). Par défaut : 300x150.Si celles-ci ne correspondent pas, l'image sera étirée ou compressée. Pour un rendu net, définis les attributs HTML pour correspondre à la résolution souhaitée.
<canvas id="myCanvas" width="400" height="300">
Ton navigateur ne supporte pas l'élément canvas.
</canvas>Le texte entre les balises est un contenu de secours affiché si le navigateur ne supporte pas Canvas.
Pour dessiner, tu obtiens le contexte de rendu 2D en JavaScript :
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');Le contexte 2D fournit des méthodes pour dessiner :
ctx.fillRect(x, y, width, height) — Rectangle rempli.ctx.strokeRect(x, y, width, height) — Rectangle avec contour.ctx.clearRect(x, y, width, height) — Efface une zone rectangulaire.ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2); // cercle
ctx.fill();ctx.beginPath() — Commence un nouveau chemin.ctx.moveTo(x, y) — Déplace le crayon sans dessiner.ctx.lineTo(x, y) — Dessine une ligne jusqu'à (x, y).ctx.arc(x, y, radius, startAngle, endAngle) — Dessine un arc ou un cercle.ctx.fill() — Remplit le chemin actuel.ctx.stroke() — Dessine le contour du chemin actuel.ctx.font = '20px Arial' — Définit la police.ctx.fillText('Bonjour', x, y) — Dessine du texte rempli.ctx.strokeText('Bonjour', x, y) — Dessine du texte avec contour.ctx.fillStyle = '#e74c3c' — Définit la couleur de remplissage.ctx.strokeStyle = '#2ecc71' — Définit la couleur du contour.<canvas id="demo" width="300" height="200">
Fallback: your browser does not support canvas.
</canvas>
<script>
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');
// Blue rectangle
ctx.fillStyle = '#3498db';
ctx.fillRect(20, 20, 100, 80);
// Red circle
ctx.fillStyle = '#e74c3c';
ctx.beginPath();
ctx.arc(200, 60, 40, 0, Math.PI * 2);
ctx.fill();
// Text
ctx.fillStyle = '#ecf0f1';
ctx.font = '18px sans-serif';
ctx.fillText('Canvas!', 100, 160);
</script>Le contenu Canvas est invisible pour les technologies d'assistance par défaut. Pour le rendre accessible :
role="img" — Indique aux lecteurs d'écran que le canvas représente une image.aria-label — Fournit une description textuelle.<canvas role="img" aria-label="Graphique en barres montrant les données de ventes mensuelles"
width="400" height="300">
<p>Graphique en barres : Jan 100€, Fév 150€, Mar 200€</p>
</canvas>Pour les applications canvas interactives (jeux, outils), envisage de fournir une interface HTML alternative ou d'utiliser des régions ARIA live pour annoncer les changements d'état.
Pourquoi devrais-tu définir width et height comme attributs HTML sur <canvas> plutôt que d'utiliser uniquement CSS ?