How can I break textToPoints into lines according to canvas width

p5.js Coding Questions
1

I’m trying to adapt the Steering Behavior tutorial from the Coding Train and make it more responsive.
I’m wondering how can I divide the text into lines according to some width value, like canvas width.

I thought about using textBounds to check the width of the entire sentence and then remove the last word of the sentence until it is long enough to fit the container, however I can’t wrap my head on how to this recursively so we get the most amount of words in each line :slight_smile:

 bounds = font.textBounds(title, 0, 0, fontSize) as Bounds;
    while (bounds.w > canvasSize.width) {
      linesToRender.unshift(getLastWord(title));
      title = removeLastWord(title);
      bounds = font.textBounds(title, 0, 0, fontSize) as Bounds;
      linesToRender = [linesToRender.join(" ")];
      linesToRender = [title, ...linesToRender];
    }
2
  • Perhaps it’d be easier to start w/ just 1 word, then keeping adding more until the line exceeds maximum width.
  • Then create another line having the word which had exceeded the width from previous line.
  • Keep doing that until all words from the text are added to the lines.
3