Fabric js text restrictions

Question

How can i achieve this in fabric.js?

Text Restrictions: 1)- If user types too much text in the text box available, it should not allow them to and a message should display telling them to choose a different message or find a different font. Found the answer for this..

pls help me for remaning 2

2)- If the user types a message where there is a lot of space left in the text box in the sides, the text box should resize to be within 1mm of the text. I suppose this is in case the text box has the dotted border. Note also that the background pattern will not go under the text box, which is another reason the text box needs to be shortened if the text doesn't fill the width (so that more of the background can show).

3)- The client always wants the full height of the text box to be maxed out, so that the tops of letters always touch the top and the bottoms of letters always touch the bottom, no matter if it's a mix of lower and upper case and no matter if the letters have tails.
Here are a few examples to explain what needs to happen (please read till the end of the list to understand properly):
The word “HELLO” - all letters will touch top and bottom
The word “Hello” – the “H” and “ll” will touch top and bottom
The word “aaaa” - even though lower case will touch top and bottom
The word “aaah” – the “h” will touch top and bottom and the “aaa” will only touch bottom
The word “big” – because the “g” goes down, the “g” will touch the bottom but
the “bi” will not. The word will actually be very small because the “b” will touch the top but not the bottom, the “g” will touch the bottom but not the top, and the “i” will not touch either.

Answer 1

For problem 2, you need to catch the event,

and then inside the function you should get the width of text box and width of actual text and adjust the textbox width accordingly, something like

canvas.on('text:editing:exited',   onTextExited)
onTextExited = function(event)
{
var onemm = 10; //Need to calculate what one mm is in pixels
var canvasObj=event.target;
if(canvasObj.width > canvasObj._getTextWidth())
{
//Adjust the width of object 
canvasObj.width = canvasObj._getTextWidth() + onemm;
canvasObj.setCoords();
}

}