CanvasRenderingContext2D.fillText()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La méthode CanvasRenderingContext2D.fillText() de l'API Canvas 2D écrit un texte donné à la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.

Voir aussi la méthode CanvasRenderingContext2D.strokeText() pour dessiner un texte mis en forme.

Syntaxe

js
void ctx.fillText(texte, x, y [, largeurMax]);

Paramètres

texte

Le texte à représenter en utilisant les valeurs en cours de font, textAlign, textBaseline, et de direction.

x

La valeur de la coordonnée sur l'axe des x du point de début du texte.

y

La valeur de la coordonnée sur l'axe des y du point de fin du texte.

largeurMax Facultatif

La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.

Exemples

Utilisation de la méthode fillText

Ceci est seulement un fragment de code simple utilisant la méthode fillText.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);

Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :

Code jouable

Spécifications

Specification
HTML Standard
# dom-context-2d-filltext-dev

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi