html5 canvas - Come posso allungare il testo?

Question

Nella mia tela html 5, disegno il testo (che deve essere su 1 riga) ma deve essere una dimensione e uno stile di carattere costanti e anche la larghezza dello spazio che ho è costante. Pertanto il testo deve adattarsi a quello spazio, ma il problema si verifica quando il testo è troppo lungo e supera lo spazio.

Quindi c'è un modo per estendere/comprimere il testo in orizzontale? (come in PhotoShop)

Qualcosa come convertirlo in un'immagine quindi cambiare la larghezza dell'immagine? Non sono sicuro se questo è il modo migliore ...

Grazie

Answer 1

Una soluzione semplice è quello di richiamare il testo in un altro (in memoria) tela e poi usare drawImage per incollare il contenuto di tela in tela vera destinazione.

Qualcosa di simile (lascia che sia parametrizzabile a seconda delle esigenze, qui si estende con un rapporto di 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

È possibile utilizzare measureText per determinare la dimensione del testo, poi scala la tela, se necessario: 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(); 
}