HTML Academy · Leçon

Configurer `canvas` et le contexte 2D

Créez un élément `canvas` et obtenez le contexte de rendu 2D.

Configurer `canvas` et le contexte 2D est une leçon HTML 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 HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

L'élément canvas

L'élément <canvas> est une surface bitmap sur laquelle le navigateur peut dessiner :

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Attributs de largeur et de hauteur

Définissez toujours les dimensions de canvas via les attributs HTML, et non avec le CSS :

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

Obtenir le contexte 2D

Obtenez le contexte de rendu 2D pour dessiner :

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Système de coordonnées

Le système de coordonnées de canvas commence en haut à gauche :

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

État de canvas

canvas possède un état de dessin qui peut être enregistré et restauré :

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Effacer canvas

Effacez l'ensemble de canvas avant de le redessiner (pour une animation) :

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle et strokeStyle

Définissez les couleurs des opérations de remplissage et de tracé :

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth et autres propriétés de style

Propriétés de style des tracés et des lignes :

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Canvas HiDPI adaptatif

Corrigez le flou de canvas sur les écrans à haute densité/HiDPI :

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

canvas ou SVG

Quand choisir canvas ou SVG :

Canvas — matriciel, pixel par pixel, idéal pour les jeux, la visualisation de grandes quantités de données et le traitement d'images
SVG — vectoriel, redimensionnable, idéal pour les logos, les icônes, les graphiques interactifs et l'accessibilité

Accessibilité de canvas

canvas n'offre aucune accessibilité intégrée : ajoutez-la manuellement :

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Vérification rapide

Quelle est la bonne manière d'obtenir un contexte de dessin pour canvas ?

Récapitulatif : configuration de canvas

Notions essentielles pour configurer canvas :

Définissez la largeur et la hauteur via les attributs HTML, et non avec le CSS
canvas.getContext('2d') — obtenez le contexte de dessin
Origine en haut à gauche (0,0) ; x→vers la droite, y→vers le bas
ctx.save() / ctx.restore() — gestion de l'état fondée sur une pile
Effectuez une mise à l'échelle selon devicePixelRatio pour un rendu net sur les écrans à haute densité

Questions Fréquemment Posées

La leçon « Configurer `canvas` et le contexte 2D » est-elle gratuite ?

Oui — le texte complet de « Configurer `canvas` et le contexte 2D » 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 HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer `canvas` et le contexte 2D » ?

Créez un élément `canvas` et obtenez le contexte de rendu 2D. Tu pratiques HTML 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 HTML Academy ?

Aucune expérience préalable n'est requise. HTML 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 `canvas` et le contexte 2D » ?

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 HTML Academy ?

Oui. Chaque leçon HTML 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 à HTML Academy