JavaScript Academy · Leçon

Configurer le contexte Canvas

Récupérez et configurez le contexte de rendu 2D.

Configurer le contexte Canvas est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce que l’API Canvas ?

L’API Canvas vous permet de dessiner des graphiques 2D avec JavaScript sur un élément <canvas>. Vous disposez d’une surface de dessin composée de pixels et d’un ensemble de commandes pour peindre des formes, des images et du texte.

Le balisage se résume à une seule balise <canvas>.
Tout le dessin s’effectue en JavaScript par l’intermédiaire d’un objet de contexte.

<canvas id="board" width="320" height="200"></canvas>

Obtenir le contexte

Appelez getContext('2d') sur l’élément canvas pour obtenir un CanvasRenderingContext2D. Chaque commande de dessin passe par cet objet.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

Le système de coordonnées

L’origine (0, 0) se trouve dans le coin supérieur gauche. X augmente vers la droite et Y augmente vers le bas. Un canevas de 320x200 a son coin inférieur droit en (320, 200).

Attributs de largeur et de hauteur

Les attributs HTML width et height définissent la taille du tampon de dessin en pixels. Ils valent par défaut 300x150 s’ils sont omis. Leur définition en JS efface également le canevas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

Taille CSS et taille du tampon

Les valeurs CSS width/height étirent le canevas à l’écran, mais ne modifient pas le tampon de pixels. Si elles diffèrent des attributs, les dessins paraissent flous ou étirés. Gardez-les synchronisées pour obtenir un rendu net.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Gérer les écrans à haute densité de pixels

Sur les écrans Retina, devicePixelRatio vaut souvent 2. Agrandissez le tampon et réduisez l’échelle du contexte afin que les lignes restent nettes.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Définir les styles de remplissage et de contour

L’état de dessin est conservé dans le contexte. fillStyle définit la couleur de remplissage et strokeStyle définit la couleur du contour. Ils acceptent toute chaîne de couleur CSS.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

Votre premier dessin

Une fois le contexte prêt, vous pouvez peindre immédiatement. fillRect(x, y, w, h) peint un rectangle rempli en utilisant le fillStyle actuel.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Effacer le canevas

clearRect(x, y, w, h) efface une zone rectangulaire et la rend transparente. Effacer tout le tampon est généralement la première étape de chaque image d’animation.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Enregistrer et restaurer l’état

save() empile le style et la transformation actuels ; restore() les récupère au sommet de la pile. Cela isole les modifications temporaires.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Détection des fonctionnalités

Protégez-vous contre les navigateurs très anciens en vérifiant que getContext existe avant de l’utiliser.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Vérification rapide

Vérifiez votre compréhension de la configuration du canevas.

Récapitulatif : configuration du canevas

Vous avez appris à récupérer le canevas, à appeler getContext('2d'), à comprendre l’origine dans le coin supérieur gauche, à définir la taille du tampon et la taille CSS, à gérer les écrans à haute densité avec devicePixelRatio et à configurer fillStyle/strokeStyle. Ensuite : dessiner des formes et des tracés.

Questions Fréquemment Posées

La leçon « Configurer le contexte Canvas » est-elle gratuite ?

Oui — le texte complet de « Configurer le contexte Canvas » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer le contexte Canvas » ?

Récupérez et configurez le contexte de rendu 2D. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer le contexte Canvas » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy