Le canvas : une zone de dessin
La balise <canvas> est un rectangle de pixels vierge. On ne dessine pas dedans en HTML : on récupère son contexte 2D en JavaScript, puis on lui donne des ordres de dessin. C'est l'outil derrière les graphiques, les jeux et les visualisations dans le navigateur.
const canvas = document.getElementById("monCanvas");
const ctx = canvas.getContext("2d"); // le "pinceau"
ctx.fillStyle = "#329e5a";
ctx.fillRect(10, 10, 100, 60); // rectangle plein (x, y, largeur, hauteur)Repère : l'origine (0, 0) est en haut à gauche ; x va vers la droite, y vers le bas.
Les ordres de base
fillRect(x, y, w, h)/strokeRect(...): rectangle plein / contour.beginPath()+arc(x, y, r, 0, Math.PI*2)+fill(): un cercle.fillText("Salut", x, y): du texte (avecctx.font).fillStyle/strokeStyle: la couleur de remplissage / de trait.drawImage(img, x, y): dessiner une image.
Chaque ordre peint immédiatement sur la zone. Pour « effacer », on repeint par-dessus, ou on vide avec ctx.clearRect(0, 0, canvas.width, canvas.height).
Dessine (rendu à droite)
Animer : requestAnimationFrame
Pour animer, on redessine ~60 fois par seconde. La bonne méthode n'est PAS setInterval, mais requestAnimationFrame : le navigateur appelle ta fonction au meilleur moment (synchronisé à l'écran, mis en pause si l'onglet est caché).
The canvas: a drawing area
The <canvas> tag is a blank rectangle of pixels. You don't draw in it with HTML: you get its 2D context in JavaScript, then give it drawing orders. It's the tool behind charts, games and visualizations in the browser.
const canvas = document.getElementById("monCanvas");
const ctx = canvas.getContext("2d"); // the "brush"
ctx.fillStyle = "#329e5a";
ctx.fillRect(10, 10, 100, 60); // filled rectangle (x, y, width, height)Coordinates: the origin (0, 0) is top-left; x goes right, y goes down.
The basic orders
fillRect(x, y, w, h)/strokeRect(...): filled / outlined rectangle.beginPath()+arc(x, y, r, 0, Math.PI*2)+fill(): a circle.fillText("Hi", x, y): text (withctx.font).fillStyle/strokeStyle: the fill / stroke color.drawImage(img, x, y): draw an image.
Each order paints immediately. To "erase", repaint over it, or clear with ctx.clearRect(0, 0, canvas.width, canvas.height).
Draw (preview on the right)
Animate: requestAnimationFrame
To animate, you redraw ~60 times per second. The right method is NOT setInterval, but requestAnimationFrame: the browser calls your function at the best moment (synced to the screen, paused if the tab is hidden).
🎯 Pratique
S'entraîner (clique pour ouvrir) :
⚖️ Juge le code de l'IA
Tu demandes à l'IA une animation Canvas. Elle te rend ce code. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi. Regarde la méthode de boucle et ce qui se passe (ou pas) à chaque image.
const ctx = document.getElementById("c").getContext("2d");
let x = 0;
setInterval(() => {
ctx.beginPath();
ctx.arc(x, 70, 16, 0, Math.PI * 2);
ctx.fillStyle = "#329e5a";
ctx.fill();
x += 2;
}, 16);setInterval au lieu de requestAnimationFrame : pas de synchro avec l'écran, et l'animation continue de tourner même quand l'onglet est caché (CPU et batterie gaspillés). 2) Il manque le ctx.clearRect(0, 0, canvas.width, canvas.height) au début de chaque image : comme on ne dessine jamais par-dessus du vide, le cercle laisse une traînée et finit en gros boudin vert. Le réflexe pro : requestAnimationFrame(boucle) + clearRect en première ligne de la frame.🧠 Rappel libre
Sans remonter dans la leçon : par quelle ligne obtient-on le « pinceau » à partir d'un <canvas>, et pourquoi préfère-t-on requestAnimationFrame à setInterval pour animer ?
const ctx = canvas.getContext("2d") : c'est lui qui porte tous les ordres de dessin (fillRect, arc, fillText…). Pour animer, on préfère requestAnimationFrame parce qu'il synchronise le rendu avec le rafraîchissement de l'écran (≈ 60 images/s, fluide) et se met en pause quand l'onglet est caché, alors que setInterval tourne à l'aveugle même hors écran et gaspille CPU et batterie.Tu as fait le tour du JavaScript avancé : classes, prototypes, modules, API du navigateur et Canvas. Tout ça ne s'ancre vraiment qu'en construisant : place aux projets appliqués, guidés pas à pas.
Passer aux projets →