Geek asks and answers

Html5 canvas - How to stretch text?

In my canvas html 5I draw text (which should be on 1 line), but it should be a constant font size and style, and the width of the space that I have is also constant. Therefore, the text should fit this space, but the problem arises when the text is too long and passes by a space.

So is there a way I can horizontally stretch / compress text? (e.g. in Photoshop)

Something like converting it to an image and then resizing the image? Not sure if this is the best way ...

thank

+5
source share
2 answers

measureText, , : http://jsfiddle.net/eGjak/887/.

var text = "foo bar foo bar";
ctx.font = "30pt Arial";

var width = ctx.measureText(text).width;
if(width <= 100) {
    ctx.fillText(text, 0, 100);
} else {
    ctx.save();
    ctx.scale(100 / width, 1);
    ctx.fillText(text, 0, 100);
    ctx.restore();
}
+9

, ( ) , drawImage .

- ( , 100 80):

var tempimg = document.createElement('canvas');
tempimg.width = 100;
tempimg.height = 10;
oc = tempimg.getContext('2d');
oc.fillText(...)
yourdestcontext.drawImage(tempimg, 0, 0, 100, 10, x, y, 80, 10);
+1

More articles:


All Articles