CanvasRenderingContext2D: свойство textAlign

Свойство CanvasRenderingContext2D.textAlign API Canvas 2D задает текущее выравнивание текста при отрисовке текста.

Выравнивание относительно значения x метода fillText(). Например, если textAlign равно "center", то левый край текста будет находиться в x - (textWidth / 2).

Возможные значения:

"left"

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

"right"

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

"center"

Текст центрируется.

"start"

Текст выравнивается по началу строки (слева для локалей слева направо, справа для локалей справа налево).

"end"

Текст выравнивается по концу строки (справа для локалей слева направо, слева для локалей справа налево).

Значение по умолчанию — "start".

Этот пример демонстрирует три "физических" значения свойства textAlign: "left", "center", и "right".

HTML

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

JavaScript

const canvas = document.getElementById("canvas");
canvas.width = 350;
const ctx = canvas.getContext("2d");
const x = canvas.width / 2;

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = "30px serif";

ctx.textAlign = "left";
ctx.fillText("left-aligned", x, 40);

ctx.textAlign = "center";
ctx.fillText("center-aligned", x, 85);

ctx.textAlign = "right";
ctx.fillText("right-aligned", x, 130);

Результат

Этот пример демонстрирует два значения свойства textAlign, зависящих от направления: "start" и "end". Обратите внимание, что свойство direction вручную установлено в "ltr", хотя это значение также является значением по умолчанию для текста на английском языке.

HTML

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

JavaScript

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

ctx.font = "30px serif";
ctx.direction = "ltr";

ctx.textAlign = "start";
ctx.fillText("Start-aligned", 0, 50);

ctx.textAlign = "end";
ctx.fillText("End-aligned", canvas.width, 120);

Результат

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D