Dessin de texte avec canvas

Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :

fillText(text, x, y [, maxWidth])

Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.

strokeText(text, x, y [, maxWidth])

Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.

Le texte est rempli en utilisant le fillStyle actuel.

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

<canvas id="canvas" width="300" height="100"></canvas>

draw();

Le texte est rempli en utilisant le strokeStyle courant.

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

<canvas id="canvas" width="300" height="100"></canvas>

draw();

Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :

font = value

Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS font. La police par défaut est 10px sans-serif.

textAlign = value

Paramètre d'alignement du texte. Valeurs possibles : start (début), end (fin), left (gauche), right (droite) ou center (centre). La valeur par défaut est start.

textBaseline = value

Paramètre d'alignement de base. Valeurs possibles : top (haut), hanging (suspendu), middle (moyen), alphabetic (alphabétique), ideographic (idéographique), bottom (en bas). La valeur par défaut est alphabetic.

direction = value

Directionnalité. Valeurs possibles: ltr (de gauche à droite), rtl (de droite à gauche), inherit (hérité). La valeur par défaut est inherit.

Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.

Le diagramme suivant du WHATWG illustre les différentes lignes de base prises en charge par la propriété textBaseline.

Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);

Code jouable

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea
>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.

measureText()

Retourne un objet TextMetrics contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.

L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  var text = ctx.measureText("foo"); // objet TextMetrics
  text.width; // 16;
}

Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.

• Précédent
• Suivant