CanvasRenderingContext2D.textAlign

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.