Improving Drawing Whatssap Conversation On Canvas Fiddle Html5

I'm drawing a WhatsApp conversation on a canvas PROBLEM 1) I'm able to resize the rectangle that contains the text, but not accurately....this is the step 1 It depends on the numbe

Solution 1:

I suggest create a function for line count. And update de pixels factor of the incremental factor

const incrementFactor = 30;
const maxLineLengthLine = 30; //max length characters count per lineconst paragraphCount = lineCount(text.length, maxLineLengthLine);

functionlineCount(charactersCount, maxLineLengthLine){
 maxLine = maxLine?maxLine:1;
 charactersCount = charactersCount ? charactersCount:1;
 returnMath.ceil(charactersCount/maxLine)
}

see https://jsfiddle.net/vf8gvq7m/174/

Solution 2:

If the rectangle is a set width can you determine the height based on the number of characters in the text? So imagine you are able to get 100 characters per line and a line is 5px height. Now you have 242 characters you can divide 242/100 to get 2.42, round up to 3, now you need 5px x 3 lines height to fit all the text.