Stretch Text ... if length is greater than 10 in Html5 Canvas

Question

Recently, I have been working with HTML5 canvas. Here is my JSFiddle:

http://jsfiddle.net/fknjz/17/

And here is what I found that might be useful:

http://www.mono-software.com/blog/post/Mono/145/jQuery-dynamic-text-sizing/

I need something like this:

If document.getElementById ("nom"). value.length> 10 ... then the text value will be stretched by -5% each time a letter is typed ... so the text will begin to decrease (only the width) if more than 10 letters are indicated in the text box on the canvas.

Does anyone know how I can make this work?

Thanks!

Answer 1

I am not 100% sure if this is what you even after that, since the question is fuzzy, but do you know that there is a fourth parameter for fillText ? It is suitable for text up to maximum width. I updated your jsFiddle here http://jsfiddle.net/fknjz/32/ .

I also added clearRect to clear the areas under the texts so you can refresh the view without messing up.