canvas | Выравнивание текста

Стандартное поведение контекста визуализации определяет для текста выравнивание по левому краю (по началу текста). Это логично т. к. большинство языков имеют направление печати слева-направо. Но как можно выровнять текст на холсте canvas по центру или по правому краю (по концу текста)?

В нашем примере будет создан блок canvas на странице документа. Его размеры будут заданы по умолчанию в 300 на 150 пикселей. Мы будем производить заливку текста указав горизонтальный сдвиг вправо на 150 пикселей (это горизонтальная середина холста). Так будет легче понять смысл.

Вертикальное расположение текстов задано со сдвигами по 30 пикселей, чтобы контексты не наползали друг на друга.

Варианты выравнивания текста по горизонтали. Пример.

3 варианта горизонтального выравнивания текста

Все варианты выравнивания в виде кода

<!DOCTYPE html>

<head>

<title>Выравнивание текста на холсте canvas</title>

</head>

<body>

let my_canvas = document.createElement(‘canvas’);

document.body.append(my_canvas);

// Выравниваем по левому краю

let context_L = my_canvas.getContext(‘2d’);

context_L.textAlign = ‘start’;

context_L.fillText(‘ЛевоЛево‘, 150, 30);

// Выравниваем по правому краю

let context_R = my_canvas.getContext(‘2d’);

context_R.textAlign = ‘end’;

context_R.fillText(‘ПравоПраво’, 150, 60);

// Выравниваем по центру

let context_C = my_canvas.getContext(‘2d’);

context_C.textAlign = ‘center’;

context_C.fillText(‘ЦентрЦентрЦентр‘, 150, 90);

</script>

</body>

</html>

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

// Выравниваем по левому краю

let context_L = my_canvas.getContext(‘2d’);

context_L.textAlign = ‘start’;

context_L.fillText(‘ЛевоЛево‘, 150, 30);

Выравнивание по центру

// Выравниваем по центру

let context_C = my_canvas.getContext(‘2d’);

context_C.textAlign = ‘center’;

context_C.fillText(‘ЦентрЦентрЦентр‘, 150, 90);

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

// Выравниваем по правому краю

let context_R = my_canvas.getContext(‘2d’);

context_R.textAlign = ‘end’;

context_R.fillText(‘ПравоПраво’, 150, 60);

ВНИМАНИЕ!!!

Метод fillText(text, x, y [, maxWidth ]) нужно вызывать только после присваивания типа выравнивания текста. Если залить до выравнивания, то выравнивание не выполнится (будет по умолчанию).

Информационные ссылки

canvas | Стили текста

HTML | Элемент canvas

Стандарт HTML — Раздел «4.12.5 The canvas element» — https://html.spec.whatwg.org/multipage/canvas.html