CanvasRenderingContext2D.fillText() - малює заповнений текст.
ctx.fillText(text, x, y [, maxWidth]);
ctx - об'єкт CanvasRenderingContext2D.
text - текст який потрібно намалювати.
x - координати по осі x початкової точки прямокутника.
y - координати по осі y початкової точки прямокутника.
maxWidth - не обов'язково вказувати. Максимальна ширина малювання тексту. Якщо малювання тексту буде більше за maxWidth то текст маштабується під максимальну ширину.
fillText() метод об'єкту CanvasRenderingContext2D який малює залитий текст за вказаними координатами на полотні canvas.
Текст малюється використовуючи властивості: font, textAlign, textBaseline, direction і fillStyle.
var canvas = document.getElementById("canvas").getContext("2d");
canvas.fillStyle="blue";
canvas.font="18pt Arial";
canvas.fillText("JavaScript", 8, 50);
var el = document.getElementById("canvas");
var canvas = el.getContext("2d");
canvas.font="22pt sans-serif";
canvas.fillStyle="red";
canvas.fillText("JavaScript Canvas", 5, 28, 95);
Малюємо вертикальний текст на полотні canvas, обертаючи матрицю методом rotate():
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
//перевертаємо матрицю
ctx.rotate( 1.5707963267948966 ); //90градусів
ctx.font="14px Arial";
ctx.fillText("яваскрипт.укр", 10, -25);
//скидаємо матрицю
ctx.resetTransform();
ctx.fillText("текст", 40, 15);