Лучший метод масштабирования текста для заполнения холста HTML5

Question

Мне нужно «масштабировать» текст, чтобы заполнить античный холст HTML5.Похоже, что метод scale() не влияет на текст.Я видел методы аппроксимации с итерационными циклами на методе measureText(), но это не дает мне именно то, что мне нужно.В идеале я хотел бы заполнить как горизонтально, так и вертикально без сохранения соотношения сторон.Сможет ли SVG помочь с этим?

Answer 1

Мой плохой - Шкала относится к тексту.Я придумал решение:

context.font = "20px 'Segoe UI'";
var metrics = context.measureText("Testing!");
var textWidth = metrics.width;

var scalex = (canvas.width / textWidth);
var scaley = (canvas.height / 23);

var ypos = (canvas.height / (scaley * 1.25));

context.scale(scalex, scaley);
context.fillText("Testing!", 0, ypos);

Answer 2

Масштаб влияет на текст. Попробуйте это:

var can = document.getElementById('test');
var ctx = can.getContext('2d');

ctx.fillText("test", 10, 10); // not scaled text


ctx.scale(3,3);
ctx.fillText("test", 10, 10); // scaled text

Смотрите это в действии здесь: http://jsfiddle.net/3zeBk/8/