Текст

Для добавления текста на холст нужно определить несколько свойств и вызвать подходящий метод.

Свойства Текста:

font. Синтаксис аналогичен CSS-ситнаксису свойства font

textAlign. Возможные варианты выравнивания по горизонтали. Описываются значениями start, end, left, right и center.

textBaseLine. Выравнивание по вертикали. Возможные значения: top, hanging, middle, alphabetic, ideographic и bottom.

Методы текста:

• strokeText(text, x, y [, max-size]). Текст выводится в точках x, y. Возможено передавать четвертый параметр, определяющий максимальный размер текста.
• fillText(text, x, y). Аналогичен предыдущему методу, но визуализирует текст, как залитые цветом фигуры.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.font = "bold 24px verdana, sans-serif";
  canvas.textAlign = "start";
  canvas.fillText("my message", 100, 100);
}
addEventListener("load", initiate);

Для работы с текстом еще есть один метод, который измеряет текст, - measureText(). Он возвращает информацию о размере указанного текста. Благодаря методу measureText() и свойству width можно узнать длину текста по горизонтали.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.font = "bold 24px verdana, sans-serif";
  canvas.textAlign = "start";
  canvas.textBaseline = "bottom";
  canvas.fillText("My message", 100, 124);
  var size = canvas.measureText("My message");
  canvas.strokeRect(100, 100, size.width, 24);
}
addEventListener("load", initiate);