1

Is there an elegant way to put text in canvas via drawText, so that it is squeezed horizontally/vertically?

Laurel
  • 5,965
  • 14
  • 31
  • 57
rommex
  • 763
  • 1
  • 8
  • 21
  • Maybe [this answer](http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js/19553200#19553200) can give some inspiration/hints. –  Jun 10 '15 at 20:38

1 Answers1

1

"Elegant?, Well...Kind of yes!"

You can scale the canvas horizontally and the text will be squeezed.

ctx.scale(.80,1);
ctx.fillText("Squeezed!",15/.80,30);
ctx.scale(-0.80,1);

enter image description here

markE
  • 102,905
  • 11
  • 164
  • 176
  • Thank you. Seems like a right path, but let me clarify. My canvas contains other graphics, and it shouldn't be modified. CTX in your code is a canvas? I have hard time searching for filltext method... – rommex Jun 10 '15 at 19:41
  • You're welcome :-) `ctx` is the context object associated with a canvas element. In my example, the canvas is **temporarily squeezed** to 80% but after drawing the text with `context.fillText` the example **unsqueezes** the canvas so all new drawings will not be squeezed. Good luck with your project! – markE Jun 10 '15 at 19:47
  • Appreciate it, sir. I'm trying to get text as if it were written on a slope that user sees from an upper point. – rommex Jun 10 '15 at 19:49