Вывод текста в Canvas

Canvas позволяет добавить текст в изображение. Перед этим нужно установить стиль текста. Это делается с помощью свойства font. Значение пишется так же, как свойство font в CSS. Для текста можно указать стиль, вариант, ширину, размер и шрифт.

Вывод текста в Canvas производит метод fillText()

fillText (текст, X, Y)

Параметры:

текст - строка текста, которая добавляется в изображение

X - координата X текста

Y - координата Y текста

Пример:

HTML код:

8	<canvas width="700" height="400"></canvas>

JavaScript:

10
11
12
13
14
15

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#000';
ctx.font = 'bold 20px Arial';
ctx.fillText('Текст на картинке', 5, 30);

Метод strokeText() также добавляет текст, но не закрашенный, а в виде линий. Параметры такие же.

17
18
19

ctx.strokeStyle = '#0000FF';
ctx.font = '50px Tahoma';
ctx.strokeText('Текст в виде линии', 5, 70);

При добавлении текста мы указываем точку, которая является координатами текста. Существует метод TextAlign(), который устанавливает, с какой стороны от этой точки располагается текст. Значения:

start - текст справа от точки (по умолчанию)

center - точка в центре текста

end - текст слева от точки

left - то же, что start

right - то же, что end

Пример:

21
22

ctx.textAlign = 'center';
ctx.fillText('Текст по центру', 200, 110);