CanvasRenderingContext2D.textAlign

Свойство CanvasRenderingContext2D.textAlign Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода fillText(). Так что, если значение textAlign равно "center", то текст будет прорисован в x - (width / 2).

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

left

Выравнивание текста по левому краю.

right

Выравнивание текста по правому краю.

center

Текст отцентрирован.

start

Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).

end

Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево

По умолчанию значение textAlign установлено как "start".

Довольно простой сниппет использования значения textAlign для изменения выравнивания текста.

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);

Отредактируйте приведённый ниже код и посмотрите, как обновляется ваше обновление на холсте:

• Интерфейс, предоставляющий данный метод CanvasRenderingContext2D.