Get height and width of multi-line text on canvas

Question

1.00/5 (2 votes)

See more:

We are implementing a comment functionality on canvas, so for drawing the comment we use a comment image and draw text over it . Could you please let us know how could we get the height and width of the multi-line text written so that we can fit the text inside the image?

What I have tried:

we have tried calculating the height and width by calculating the total no of characters but it fails with different font size

Posted 11-May-16 1:58am

tech360.ats

Updated 14-Mar-22 10:40am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-05-11T06:58:00

Put this text in some other free-size HTML element and render it. For accurate result, you should set the style of this element to have zero padding and borders. Then measure the size of this element using these two HTML element's properties offsetHeight and offsetWidth (sic!).

For a multiline text, this element should be the block element, such as "p" or "div". In this case, there are no predefined width and height, the problem would be ambiguous. Then set it's width by its style to some fixed value you like and measure resulting height. The text will be rendered with word wrapping, automatically, and that will define the height of the outer element.

Problem solved.

—SA