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

Чтобы вывести текст в элемент <canvas>, используют следующие методы и свойство:

  • font — свойство, которое определяет шрифт текста
  • fillText(text,x,y) — рисует "залитый" текст
  • strokeText(text,x,y) — рисует простой текст без заливки

Используем метод fillText()

Установим шрифт "Arial" размером 30px и нарисуем текст с заливкой в элементе <canvas>:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Используем метод strokeText()

Установим шрифт "Arial" размером 30px и нарисуем текст без заливки в элементе <canvas>:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Добавляем цвет и центрирование текста

Установим шрифт "Comic Sans MS" размером 30px и нарисуем текст с заливкой красного цвета в элементе <canvas>:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);