Drawing with Canvas — Advanced JavaScript course

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 (avec ctx.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)

Essaie toi-même

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é).

Animation

Accepter ou rejeter 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);

Rejeter, deux problèmes. 1) La boucle utilise 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 ?

On récupère le contexte 2D avec 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.

Comment dessine-t-on dans un <canvas> ?

En écrivant du HTML à l'intérieur En JS, via le contexte 2D obtenu avec getContext('2d') Avec du CSS uniquement

Pour une animation fluide, on utilise…

Une grosse boucle while setInterval à 1 ms requestAnimationFrame, synchronisé à l'écran

Bravo, tu as fini le cours

Classes, this et prototypes, modules, Web APIs, Canvas : tu as les outils du JavaScript moderne. Pour pratiquer, le projet « Carte en image » des Projets appliqués utilise justement Canvas.

Revoir le cours →

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 (with ctx.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)

Try it yourself

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).

Animation

Well done, you finished the course

Classes, this and prototypes, modules, Web APIs, Canvas: you've got the modern JavaScript toolkit. To practise, the "Image card" project in the Applied projects uses Canvas.

Back to the course →

Next step

You've toured advanced JavaScript: classes, prototypes, modules, browser APIs and Canvas. None of it really sticks until you build: on to the applied projects, guided step by step.

Move on to projects →