Best Method Of Scaling Text To Fill An Html5 Canvas

I need to 'scale' text to fill an antire HTML5 canvas. It appears that the scale() method does not affect text. I've seen approximation methods with iterative loops on the measureT

Solution 1:

My bad - Scale DOES apply to text. I've come up with a solution:

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

Solution 2:

Scale does affect text. Try this:

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

See it in action here: http://jsfiddle.net/3zeBk/8/