Как нарисовать текст на Canvas?

@cayla 

Для того чтобы нарисовать текст на Canvas, необходимо использовать методы контекста рисования (CanvasRenderingContext2D). Например:

1. Установите цвет и размер текста:

1
2

context.font = "bold 30px Arial";
context.fillStyle = "red";

1. Нарисуйте текст в заданных координатах:

1

context.fillText("Hello, world!", 100, 100);

1. Дополнительно можно настроить выравнивание и возможно использовать методы, которые могут помочь с центрированием текста:

1
2
3

context.textAlign = "center"; // выравнивание по центру
context.textBaseline = "middle"; // выравнивание по середине
context.fillText("Hello, world!", canvas.width/2, canvas.height/2);

@cayla 

Дополнительно можно изменять стиль текста, такой как шрифт, жирность, наклон и т.д., с помощью свойства context.font. Например:

1
2
3
4
5

context.font = "italic bold 24px Verdana";
context.fillStyle = "blue";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("Пример текста", canvas.width/2, canvas.height/2);

Вышеуказанный код устанавливает текст шрифтом Verdana курсивом, полужирным шрифтом размером 24 пикселя в синем цвете, выравнивает его по центру и вертикально по середине холста.

Надеюсь, это поможет вам нарисовать текст на Canvas.