HTML Canvas
Auparavant, SVG plaçait des icônes nettes en balisage vectoriel ou fichier .svg. Cette leçon présente canvas : une boîte bitmap vide peinte par JavaScript. HTML place et dimensionne seulement ; les scripts dessinent des pixels. Portée pratique — élément + petit dessin 2D — pas un cours Canvas API, jeux ou WebGL complet.
Pourquoi canvas dans un cours HTML
Les débutants voient canvas dans graphiques et mini-jeux. La division aide : HTML possède l’élément ; JS les pixels. Après SVG, canvas montre l’autre outil courant. Ici suffisent getContext("2d") et fillRect.
Réponse directe
1) Ajoutez canvas avec id, width, height et texte de repli. 2) En JS getContext("2d"). 3) Dessinez avec fillStyle + fillRect. 4) Les attributs fixent la résolution bitmap. 5) SVG pour icônes ; canvas pour pixels dynamiques. 6) Intro seulement.
📊 Canvas vs SVG for beginners
| Topic | Canvas | SVG |
|---|---|---|
| Drawing model | Bitmap pixels via JavaScript | Vector shapes in markup (or .svg file) |
| Who paints | Scripts on a 2d (or other) context | Browser renders SVG tree |
| Best beginner fit | Dynamic charts, games, freehand | Icons, logos, sharp UI marks |
| Scales when resized | Can blur if only CSS-stretched | Stays sharp as vectors |
| Accessible naming | Label the canvas; drawings are pixels | alt / aria-label on meaningful graphics |
| This course depth | Element + tiny 2d draw | Embed inline or via img |
Minuscule élément canvas
Sans script, canvas est un rectangle vide. HTML déclare taille et id pour que le script le trouve.
<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>
Lire l’enveloppe
- canvas crée la surface
- width/height fixent le bitmap
- id permet la sélection
- le texte entre balises est le repli
- le CSS seul peut flouter
- contrairement à SVG, pas de formes enfants en HTML
Dessiner un rectangle avec le contexte 2D
Un court script peint. getContext("2d") renvoie l’API 2D ; fillRect remplit un rectangle.
<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>
Lire les appels de dessin
- getElementById trouve canvas
- getContext("2d") ouvre l’API
- fillStyle fixe la couleur
- fillRect remplit un rectangle
- sans script, seul le repli
- ensuite : web storage
Choisir canvas vs SVG
- Logo statique net : SVG
- Pixels souvent mis à jour : canvas
- Formes en DOM : souvent SVG
- Penser région de pixels : canvas
- Badge simple : souvent SVG
- WebGL/jeux : hors de cette intro
Pratique — canvas sur la page
- Collez l’enveloppe.
- Ajoutez le script ; confirmez le rectangle.
- Changez couleur/nombres.
- Retirez le script un moment.
- Étirez en CSS seulement — flou possible.
- Phrase : canvas est bitmap JS ; SVG balisage vectoriel.
- Aperçu : web storage.
Erreurs faciles
- Attendre des formes du seul HTML
- Oublier le texte de repli
- Utiliser canvas pour des logos mieux en SVG
- Confondre canvas et SVG
- Ne changer que la taille CSS
- Prendre l’intro pour un cours Canvas complet
- Laisser canvas sans nom s’il a du sens
Résumé
- canvas est une surface bitmap vide
- JavaScript dessine avec getContext("2d") et fillRect
- SVG pour icônes ; canvas pour pixels dynamiques
- Le texte de repli aide sans dessin
- SVG était vectoriel ; ici pixels par script
- Suivant : web storage en HTML
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut