Text wrap in a element

by

Updated version of @mizar’s answer, with one severe and one minor bug fixed.

function getLines(ctx, text, maxWidth) {
    var words = text.split(" ");
    var lines = [];
    var currentLine = words[0];

    for (var i = 1; i < words.length; i++) {
        var word = words[i];
        var width = ctx.measureText(currentLine + " " + word).width;
        if (width < maxWidth) {
            currentLine += " " + word;
        } else {
            lines.push(currentLine);
            currentLine = word;
        }
    }
    lines.push(currentLine);
    return lines;
}

We’ve been using this code for some time, but today we were trying to figure out why some text wasn’t drawing, and we found a bug!

It turns out that if you give a single word (without any spaces) to the getLines() function, it will return an empty array, rather than an array with a single line.

While we were investigating that, we found another (much more subtle) bug, where lines can end up slightly longer than they should be, since the original code didn’t account for spaces when measuring the length of a line.

Our updated version, which works for everything we’ve thrown at it, is above. Let me know if you find any bugs!

More Related Contents:

  1. Canvas text rendering (blurry)
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Maximum size of a element
  4. Get a pixel from HTML Canvas?
  5. Can I turn off antialiasing on an HTML element?
  6. Resize image with javascript canvas (smoothly)
  7. How to read text file in JavaScript
  8. How to draw an inline svg (in DOM) to a canvas?
  9. Convert SVG to PNG with applied images as background to svg elements
  10. Any way to clone HTML5 canvas element with its content?
  11. Best way to detect that HTML5 is not supported
  12. JavaScript Scale Text to Fit in Fixed Div
  13. Capture frames from video with HTML5 and JavaScript
  14. How to resize html canvas element?
  15. How do I rotate a single object on an html 5 canvas?
  16. Detect if user clicks inside a circle
  17. addEventListener for keydown on Canvas
  18. How to determine the intended frame-rate on an html video element
  19. How can I highlight the line of text that is closest to the mouse?
  20. getting mouse position with javascript within canvas
  21. How to save canvas animation as gif or webm?
  22. Is there a flexible way to modify the contents of an editable element?
  23. clearRect not working
  24. canvas getContext(“2d”) returns null
  25. draw 10,000 objects on canvas javascript
  26. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  27. Body animation isn’t smooth
  28. HTML Canvas Full Screen
  29. javascript: upload image file and draw it into a canvas
  30. Extracting single frames from an animated GIF to canvas

Leave a Comment