JavaScript Academy · Leçon

Manipuler des images et du texte

Dessinez des images et du texte stylisé sur un canvas.

Manipuler des images et du texte est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Charger une image

Canvas dessine à partir d’un HTMLImageElement. Créez un objet Image, définissez son src et attendez onload avant de dessiner : les pixels ne sont pas disponibles jusque-là.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

Principes de base de drawImage

drawImage(img, dx, dy) peint l’image à la position indiquée, avec sa taille naturelle.

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

Redimensionner les images

La forme à cinq arguments drawImage(img, dx, dy, dWidth, dHeight) redimensionne l’image dans une zone cible.

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

Rogner avec le rectangle source

La forme à neuf arguments permet de rogner l’image : drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Les quatre premiers arguments décrivent la portion source.

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

Dessiner du texte rempli

fillText(text, x, y) peint du texte avec fillStyle. Par défaut, y correspond à la ligne de base du texte.

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

Texte avec contour

strokeText(text, x, y) dessine uniquement le contour avec strokeStyle et lineWidth.

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

La propriété font

font suit la syntaxe abrégée CSS : [style] [weight] size family. La taille et la famille sont obligatoires.

ctx.font = "italic bold 28px Georgia, serif";

Alignement du texte

textAlign (start/end/left/right/center) définit l’ancrage horizontal ; textBaseline (top/middle/alphabetic/bottom) définit l’ancrage vertical autour du point indiqué.

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

Mesurer le texte

measureText(text) renvoie un objet TextMetrics. Sa propriété width vous indique la largeur que le texte occupera lors du rendu — ce qui est essentiel pour la mise en page et le retour à la ligne.

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

Retour à la ligne simple

Combinez measureText avec une boucle pour répartir les chaînes longues sur plusieurs lignes.

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

Des ombres pour donner de la profondeur

Les propriétés d’ombre s’appliquent aux formes, aux images et au texte : shadowColor, shadowBlur, shadowOffsetX/Y.

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

Vérification rapide

Vérifiez vos connaissances sur le dessin d’images et de texte.

Récapitulatif : images et texte

Vous avez appris à charger des images et à les dessiner avec redimensionnement et rognage via drawImage, à afficher du texte avec fillText/strokeText, à définir font, à aligner le texte, à mesurer les largeurs avec measureText et à ajouter des ombres. Ensuite : l’animation.

Questions Fréquemment Posées

La leçon « Manipuler des images et du texte » est-elle gratuite ?

Oui — le texte complet de « Manipuler des images et du texte » 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 « Manipuler des images et du texte » ?

Dessinez des images et du texte stylisé sur un canvas. 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 3 sur 4.

Combien de temps prend la leçon « Manipuler des images et du texte » ?

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