CanvasRenderingContext2D.fillText()

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);