L'API Canvas de JavaScript

Introduction au Canvas HTML avec JavaScript

L'élément HTML <canvas> est une surface de dessin que vous contrôlez avec JavaScript. Contrairement aux images ou au SVG, le canvas fonctionne en mode immédiat : il n'existe pas d'objets de forme à suivre. Vous émettez des commandes de dessin et les pixels sont peints immédiatement. Une fois peinte, une forme n'est que des pixels colorés — le canvas n'en garde aucune mémoire, ce qui explique pourquoi le redessin est au cœur de chaque animation.

Ce chapitre explique comment obtenir un contexte 2D, dessiner des formes et des lignes, transformer le système de coordonnées et animer avec requestAnimationFrame.

Cette page couvre le contexte de rendu 2D (getContext('2d')). Canvas expose également un contexte webgl pour les graphiques 3D avec accélération matérielle, qui constitue une API distincte.

Comprendre l'élément 'canvas'

L'élément <canvas> crée une surface de dessin de taille fixe qui génère des graphiques à la volée. Il excelle dans les travaux intensifs en graphiques — jeux, graphiques, manipulation d'images, effets de particules — où vous avez besoin d'un contrôle au niveau du pixel et de taux d'images élevés. La balise seule ne dessine rien ; c'est un conteneur vide, et JavaScript effectue tout le dessin.

Un point important à retenir dès le départ : les attributs width et height définissent la taille du tampon de dessin, tandis que les propriétés CSS width/height définissent la taille affichée. Si elles diffèrent, le canvas est étiré et vos dessins semblent flous ou déformés. Définissez la taille avec les attributs (ou en JS via canvas.width/canvas.height), pas avec CSS, sauf si vous souhaitez intentionnellement mettre à l'échelle.

Configuration de base du Canvas

Pour commencer à dessiner, placez une balise <canvas> dans votre HTML, puis récupérez son contexte de dessin 2D en JavaScript avec getContext('2d'). L'objet de contexte contient toutes les méthodes de dessin.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
</script>
</body>
</html>

Essayez vous-même »

Ici, nous définissons un canvas de 200×200, lui ajoutons une bordure pour voir ses limites, et obtenons le contexte avec getContext('2d'). La bordure est purement visuelle ; la surface du canvas elle-même commence complètement transparente.

Notez le système de coordonnées : l'origine (0, 0) se trouve dans le coin supérieur gauche. L'axe x croît vers la droite et l'axe y croît vers le bas, donc (0, 0) correspond au bord supérieur et les valeurs y plus grandes se déplacent vers le bas. Cela surprend souvent les débutants habitués aux axes de style mathématique.

Dessiner des formes

La façon la plus rapide de placer quelque chose à l'écran est fillRect(x, y, width, height), qui dessine un rectangle rempli en un seul appel. Définissez d'abord fillStyle pour choisir la couleur (toute chaîne de couleur CSS fonctionne). Il existe aussi strokeRect pour un rectangle avec contour uniquement et clearRect pour effacer une région et la rendre transparente.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rectangle Example</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="rectangleCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('rectangleCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000'; // Set the fill color to red
  ctx.fillRect(20, 20, 150, 100); // Draw the rectangle
</script>
</body>
</html>

Essayez vous-même »

Créer des lignes et des tracés

Les lignes, courbes et formes personnalisées sont toutes construites à partir de tracés. Le schéma est toujours le même :

beginPath() — démarre un nouveau tracé (sans cela, votre nouvelle ligne rejoint la précédente).
moveTo(x, y) — lève le crayon et le place sans dessiner.
lineTo(x, y) — dessine un segment de ligne vers un nouveau point (appelez-le plusieurs fois pour enchaîner les segments).
stroke() pour dessiner le contour, ou fill() pour remplir la zone délimitée.

Contrôlez l'apparence de la ligne avec lineWidth, strokeStyle et lineCap avant d'appeler stroke().

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Drawing Example</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="lineCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('lineCanvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath(); // Start the path
  ctx.moveTo(50, 50); // Move the pen to (50, 50)
  ctx.lineTo(150, 50); // Draw a line to (150, 50)
  ctx.lineTo(150, 150); // Continue to (150, 150)
  ctx.lineWidth = 4; // Thicker line
  ctx.strokeStyle = 'navy'; // Line color
  ctx.stroke(); // Render the path visible
</script>
</body>
</html>

Essayez vous-même »

Dessiner des cercles et des arcs

Les cercles sont dessinés avec arc(x, y, radius, startAngle, endAngle), où les angles sont en radians (un cercle complet vaut 2 * Math.PI). Enveloppez-le dans un tracé puis utilisez fill() ou stroke() :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circle Example</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="circleCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('circleCanvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  // Center (100, 100), radius 60, full circle
  ctx.arc(100, 100, 60, 0, 2 * Math.PI);
  ctx.fillStyle = 'orange';
  ctx.fill();
  ctx.stroke(); // Add an outline on top of the fill
</script>
</body>
</html>

Opérations avancées sur le Canvas

Transformations du Canvas

translate, rotate et scale modifient le système de coordonnées du canvas plutôt que les formes individuelles. Il est crucial de noter qu'elles sont cumulatives — chacune s'appuie sur la précédente, et une rotation pivote autour de l'origine actuelle, pas du centre de la forme. Pour faire pivoter autour d'un point, utilisez d'abord translate vers ce point, puis rotate.

Étant donné que les transformations s'accumulent, encapsulez-les dans ctx.save() / ctx.restore() pour revenir à l'état précédent plutôt que d'annuler manuellement chaque transformation :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transformation Example</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="transformCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('transformCanvas');
  const ctx = canvas.getContext('2d');
  ctx.save(); // Remember the untransformed state
  ctx.translate(50, 50); // Move the canvas origin to (50, 50)
  ctx.rotate((Math.PI / 180) * 25); // Rotate 25 degrees (converted to radians)
  ctx.fillStyle = 'blue'; // Set fill color to blue
  ctx.fillRect(0, 0, 100, 50); // Draw at the new, rotated origin
  ctx.restore(); // Back to the original coordinate system
</script>
</body>
</html>

Essayez vous-même »

Animations avec Canvas

Le canvas ne dispose d'aucune animation intégrée ; vous créez du mouvement en effaçant et redessinant répétitivement toute la surface. Le requestAnimationFrame du navigateur planifie l'exécution de votre fonction de dessin avant le prochain rendu — généralement 60 fois par seconde — et s'arrête automatiquement lorsque l'onglet est masqué, ce qui explique pourquoi il est préféré à setInterval.

La boucle suit toujours trois étapes : effacer le canvas (clearRect), mettre à jour l'état (ici, la position x), puis dessiner la nouvelle image. Oubliez clearRect et vous verrez une traînée de toutes les images précédentes au lieu d'une forme en mouvement.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation Example</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="animationCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('animationCanvas');
  const ctx = canvas.getContext('2d');
  let x = 0; // Starting position
  function drawFrame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas for the new frame
    ctx.fillStyle = 'green'; // Set the fill color to green
    ctx.fillRect(x, 20, 50, 50); // Draw a moving rectangle
    x++; // Increment the horizontal position
    if (x > canvas.width) {
      x = 0;
    }
    requestAnimationFrame(drawFrame); // Continue the animation
  }
  drawFrame();
</script>
</body>
</html>

Essayez vous-même »

Erreurs courantes

Rendu flou : décalage entre la taille du tampon et la taille CSS. Définissez les dimensions avec les attributs width/height, pas avec CSS, sauf si vous souhaitez intentionnellement mettre à l'échelle.
Formes jointes : oublier beginPath() avant un nouveau tracé le fait continuer le précédent.
Lignes qui disparaissent : vous avez appelé stroke() ou fill() sans avoir construit de tracé, ou vous avez dessiné en dehors des limites du canvas.
Traînées dans l'animation : absence de clearRect au début de chaque image.
Rien ne s'affiche : le script s'est exécuté avant que <canvas> n'existe dans le DOM. Placez le script après l'élément, ou exécutez-le sur DOMContentLoaded.

Conclusion

L'élément <canvas> vous offre une surface de bas niveau, précise au pixel, pour des graphiques que HTML et CSS ne peuvent pas produire : graphiques, édition d'images, systèmes de particules et jeux complets. L'API est simple — obtenir un contexte, définir un style, émettre une commande de dessin — et les animations sont simplement cette boucle exécutée plusieurs fois par seconde.

Pour aller plus loin, consultez la balise HTML canvas et les bases du dessin sur canvas pour la partie balisage, ainsi que les animations JavaScript et l'API d'animations basée sur requestAnimationFrame pour des mouvements plus fluides. Pour sélectionner votre canvas de manière fiable, consultez getElement et querySelector.

Pratique

Que peut-on faire avec l'élément Canvas en JavaScript d'après le contenu trouvé sur w3docs.com ?

On peut peindre des pixels sur un écran.On peut créer une ambiance avec des couleurs clignotantes.On peut créer des visualisations, des animations et des jeux.On peut créer un calendrier.On peut dessiner des graphiques à la volée.