Question

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 measureText() method but this doesn’t get me exactly what I need. Ideally I’d like to fill both horizontally and vertically without conserving the aspect ratio. Would SVG possibly be able to help with this?

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