lienzo html5 - ¿Cómo puedo estirar el texto?

Question

En mi lienzo html 5, dibujo texto (tiene que estar en 1 línea) pero tiene que ser de un tamaño y un estilo de fuente constante y el ancho del espacio que tengo también es constante. Por lo tanto, el texto debe caber en ese espacio, pero el problema ocurre cuando el texto es demasiado largo y pasa el espacio.

Entonces, ¿hay alguna manera de poder estirar/comprimir el texto de forma horizontal? (como en PhotoShop)

¿Algo así como convertirlo en una imagen y luego cambiar el ancho de la imagen? No estoy seguro si esta es la mejor manera ...

Gracias

Answer 1

Una solución simple es dibujar el texto en otro (en la memoria) lienzo y luego usar drawImage para pegar el contenido de la lona en el lienzo de destino real.

Algo como esto (que sea en función parametrizable de sus necesidades, aquí se extiende con una relación de 100 a 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); 

Answer 2

Usted puede utilizar measureText para determinar el tamaño del texto en primer lugar, a continuación, escala el lienzo si es necesario: 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(); 
}