1

I know we have measureText in canvas and get the width of any string. Sometimes, before I render a text on a canvas, I need to know where overflow occurs. I think I can do that with multiple calls of measureText. But it doesn't look efficient.

If there's a built-in method like measureText for what I'm asking(even draft only for now), that would be the best.

If there isn't, what is the common practice for this problem?

worudso
  • 45
  • 5
  • Move to HTML+CSS before rendering on your canvas, that's way more powerfull for text rendering. See also this related [Q/A](https://stackoverflow.com/questions/54203800/javascript-jquery-making-text-to-fit-perfectly-on-div-given-dimensions-with-line/54472418#54472418) which was doing this. Both questions there were asking for line-breaks, so the code does check for it. In you case, you just have to set `word-break: break-all` on the testing element, or check for `range.getBoundingClientRect.right > elem.getBoundingClient().right` instead of checking for the bottom position. – Kaiido May 23 '19 at 02:48
  • https://jsfiddle.net/g3Lov29u/1/ – Kaiido May 23 '19 at 03:08

0 Answers0