Texte sur Canvas HTML

L'élément HTML5 <canvas> permet de dessiner du texte directement sur une surface bitmap. Contrairement au texte DOM ordinaire, le texte canvas est peint sous forme de pixels — une fois dessiné, il n'a pas de balisage, ne peut pas être sélectionné, copié ou lu par les lecteurs d'écran, et ne se redistribue jamais. Son apparence est contrôlée via le contexte de dessin (getContext("2d")) plutôt qu'avec CSS, ce qui rend le texte canvas idéal pour les graphiques, les diagrammes, les interfaces de jeux et la génération d'images, mais un mauvais choix pour le corps de texte courant.

Ce chapitre s'appuie sur l'introduction au Canvas et les bases du dessin. Pour colorier le texte avec des dégradés, consultez Canvas Gradients.

Propriétés et méthodes

Propriété / Méthode	Description
font	Retourne les paramètres de police actuels et peut être défini pour changer la police.
textAlign	Retourne les paramètres d'alignement du texte actuels et peut être défini pour changer l'alignement. La propriété accepte les valeurs suivantes : start, end, left, right et center. Notez que start et end dépendent de la direction du texte.
textBaseline	Retourne les paramètres d'alignement de la ligne de base actuels et peut être défini pour changer cet alignement. La propriété accepte les valeurs suivantes : top, hanging, middle, alphabetic, ideographic et bottom.
fillStyle	Définit la couleur utilisée pour remplir le texte.
strokeStyle	Définit la couleur utilisée pour tracer le contour du texte.
fillText(text, x, y [, maxWidth])	Dessine un texte rempli à la position indiquée par les coordonnées x et y. L'argument optionnel `maxWidth` réduit le texte afin qu'il ne dépasse jamais cette largeur en pixels.
strokeText(text, x, y [, maxWidth])	Trace le contour du texte à la position indiquée par les coordonnées x et y. Accepte également l'argument optionnel `maxWidth`.
measureText(text)	Retourne un objet `TextMetrics` dont la propriété `width` indique la largeur qu'aurait le texte avec la `font` actuelle. Utile pour centrer, couper à la ligne ou ajuster le texte.

La propriété `font`

La propriété font accepte la même valeur que la propriété CSS raccourcie font. Vous pouvez combiner le style, la graisse, la taille et la famille en une seule chaîne, par exemple "italic bold 18px serif". Si vous ne définissez qu'une taille et une famille (ex. "30px Arial"), les autres valeurs reviennent à leurs valeurs par défaut. Incluez toujours une taille et une famille — omettre l'une ou l'autre rend la déclaration invalide et le changement est ignoré.

ctx.font = "italic bold 18px serif";
ctx.font = "small-caps 24px 'Courier New', monospace";
ctx.font = "30px Arial"; // size + family only — also valid

Exemple de la méthode fillText() :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>

Essayez vous-même »

Exemple de la méthode strokeText() :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>

Essayez vous-même »

Exemple d'ajout de couleur et de centrage du texte :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>

Essayez vous-même »

Aligner le texte avec textAlign

La coordonnée x passée à fillText/strokeText est le point d'ancrage. La propriété textAlign détermine où le texte se positionne par rapport à ce point d'ancrage. La valeur par défaut est "start", qui suit la direction du texte — elle se comporte comme "left" pour un texte de gauche à droite et comme "right" pour un texte de droite à gauche. Avec "left", le point d'ancrage est le bord gauche ; avec "center", le texte est centré sur le point d'ancrage ; avec "right", le point d'ancrage est le bord droit ; "start" et "end" correspondent aux bords selon la direction du texte.

L'exemple ci-dessous trace une ligne de référence verticale à x = 150, puis affiche trois étiquettes ancrées à ce même x avec différentes valeurs de textAlign pour visualiser le positionnement de chacune.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="160" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const x = 150;

      // Reference line at the anchor x
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 160);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textAlign = "left";
      ctx.fillText("left", x, 40);

      ctx.textAlign = "center";
      ctx.fillText("center", x, 80);

      ctx.textAlign = "right";
      ctx.fillText("right", x, 120);
    </script>
  </body>
</html>

Positionner le texte verticalement avec textBaseline

La coordonnée y est mesurée par rapport à la ligne de base du texte, et textBaseline contrôle quelle partie des glyphes cette ligne de base désigne. La valeur par défaut est "alphabetic", où y se situe approximativement au bas des lettres comme « x ». Définissez-la sur "top" pour que y corresponde au sommet du texte, ou sur "middle" pour centrer le texte verticalement sur y — pratique lorsque vous souhaitez centrer le texte dans une boîte.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const y = 60;

      // Reference line at the anchor y
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(320, y);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textBaseline = "top";
      ctx.fillText("top", 10, y);

      ctx.textBaseline = "middle";
      ctx.fillText("middle", 90, y);

      ctx.textBaseline = "bottom";
      ctx.fillText("bottom", 200, y);
    </script>
  </body>
</html>

Texte avec contour (strokeText + fillText)

Vous pouvez combiner un remplissage et un contour sur le même texte pour obtenir un effet de texte bordé. Appelez d'abord fillText pour poser la couleur pleine, puis strokeText par-dessus afin que le contour reste net. Utilisez fillStyle, strokeStyle et lineWidth pour contrôler l'apparence.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="360" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");

      ctx.font = "bold 60px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";

      const x = canvas.width / 2;
      const y = canvas.height / 2;

      ctx.fillStyle = "gold";
      ctx.fillText("Canvas", x, y);

      ctx.lineWidth = 2;
      ctx.strokeStyle = "black";
      ctx.strokeText("Canvas", x, y);
    </script>
  </body>
</html>

Mesurer le texte avec measureText()

measureText() retourne un objet TextMetrics décrivant la façon dont le texte serait rendu avec la font actuelle. Sa propriété width est la plus couramment utilisée : vous pouvez la soustraire de la largeur du canvas pour centrer le texte manuellement, ou la comparer à une largeur disponible pour couper un long texte en plusieurs lignes.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="100" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const text = "Measured!";

      ctx.font = "30px Arial";
      const metrics = ctx.measureText(text);

      // Center horizontally without changing textAlign
      const x = (canvas.width - metrics.width) / 2;
      ctx.fillText(text, x, 55);
    </script>
  </body>
</html>

Astuce : lorsque vous avez seulement besoin que le texte tienne dans une largeur fixe, l'option la plus simple est l'argument optionnel maxWidth — ctx.fillText("Long label", 10, 40, 120) réduit le texte de sorte qu'il ne dépasse jamais 120 pixels.

Exercices pratiques

Pratique

Que fait la méthode 'fillText()' du canvas ?

Elle trace le contour du texte en utilisant le strokeStyle actuel.Elle mesure uniquement la largeur du texte spécifié.Elle dessine le texte aux coordonnées données, rempli avec le fillStyle actuel.Elle dessine le texte sans jamais appliquer de couleur.Elle supprime le texte du canvas.

Pratique

Quelle propriété contrôle la position horizontale du texte par rapport à sa coordonnée x ?

Pratique

Que retourne measureText('Hello') ?

La chaîne 'Hello' dessinée sur le canvas.Un objet TextMetrics qui inclut la largeur du texte.Le nombre de caractères dans le texte.La taille de police actuelle en pixels.Rien - elle ne fait que définir la police.

Pratique

Quelle valeur est un paramètre valide pour la propriété 'font' du canvas ?

Pratique

Quel est le rôle de l'argument optionnel maxWidth de fillText() ?

Il définit la largeur du canvas.Il réduit le texte afin que sa largeur rendue ne dépasse pas la valeur indiquée.Il modifie la taille de police de façon permanente.Il coupe automatiquement le texte sur plusieurs lignes.Il centre le texte horizontalement.

Propriétés et méthodes

La propriété font

Exemple de la méthode fillText() :

Exemple de la méthode strokeText() :

Exemple d'ajout de couleur et de centrage du texte :

Aligner le texte avec textAlign

Positionner le texte verticalement avec textBaseline

Texte avec contour (strokeText + fillText)

Mesurer le texte avec measureText()

Exercices pratiques

La propriété `font`