CanvasRenderingContext2D.textAlign

La propriété CanvasRenderingContext2D.textAlign de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.fillText Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.

Syntaxe

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

Options

Valeurs possibles :

left

Le texte est aligné à gauche.

Le texte est aligné à droite.

center

Le texte est centré.

start

Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).

end

Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).

La valeur pa défaut est start.

Exemples

Utilisation de la propriété textAlign

Ceci est seulement un fragment de code simple utilisant la propriété textAlign pour indiquer un alignement de texte.

HTML

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

JavaScript

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

ctx.font = '48px serif';
ctx.textAlign = 'left';
ctx.strokeText('Hello world', 0, 100);

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

Code jouable

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi