Шаг № 1 — Создаём объект canvas через JavaScript
На первом шаге нам нужно получить новый объект холста canvas, который мы положим в переменную, чтобы иметь возможность управлять его содержимым. Для этого нам понадобится JavaScript и DOM, которые работают в браузере.
let my_canvas = document.createElement('canvas');
Шаг № 2 — Создаём для объекта canvas контекст визуализации
Элементы холста не существуют сами по себе. По умолчанию холст заливается прозрачным чёрным цветом. В таком виде холст бесполезен и нам нужно создать для него оформление.
Оформление (дизайн) задаётся при помощи «контекстов визуализации«. Именно контекстов, потому что на одном холсте можно отрисовывать много разнообразных контекстов визуализации.
В нашем случаем мы создадим всего один — называется он ‘2d’.
let context = my_canvas.getContext('2d');
Шаг № 3 — Нанесение текста на растровое изображение для объекта canvas
Для помещения текста на наш холст мы должны воспользоваться методом fillText(text, x, y [, maxWidth ])
Ещё важно знать, что при создании объекта, реализующего интерфейс CanvasTextDrawingStyles, шрифт контекста должен быть установлен на 10 пикселей без засечек.
context.fillText('Привет из 2022 года', 0, 0);
В таком виде текст попытается разместиться на холсте, но выпадет за границы холста. Мы лишь увидим некоторые нижние «хвостики букв».
Вместо нулевых координат нужно указать что-то адекватное.
Первая координата — это горизонтальный сдвиг вправо.
Вторая координата — это вертикальный сдвиг вниз.
Давайте сделаем 30 и 30, чтобы наконец-то увидеть наш текст на холсте canvas.
Полный код
<!DOCTYPE html>
<html lang=«ru»>
<head>
<meta charset=«UTF-8»>
<meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
<meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
<title>Как создать текст в canvas через JavaScript?</title>
</head>
<body>
<script>
let my_canvas = document.createElement(‘canvas’);
let context = my_canvas.getContext(‘2d’);
context.fillText(‘Привет из 2022 года’, 30, 30);
document.body.append(my_canvas);
</script>
</body>
</html>
Информационные ссылки
canvas | Как изменить размер холста?
Стандарт HTML — Раздел «4.12.5 The canvas element» — https://html.spec.whatwg.org/multipage/canvas.html
