index.html

<canvas width="600" height="800" id="target"></canvas>

script.js

  function wrapText (context: CanvasRenderingContext2D, text: string, x: number, y: number, maxWidth: number, lineHeight: number, maxLines: number = -1) {
    
    let words = text.split(' '),
        line = '',
        lineCount = 0,
        i,
        test,
        metrics;

    for (i = 0; i < words.length; i++) {
        test = words[i];
        metrics = context.measureText(test);
        while (metrics.width > maxWidth) {
            // Determine how much of the word will fit
            test = test.substring(0, test.length - 1);
            metrics = context.measureText(test);
        }
        if (words[i] != test) {
            words.splice(i + 1, 0,  words[i].substring(test.length))
            words[i] = test;
        }  

        test = line + words[i] + ' ';  
        metrics = context.measureText(test);
        
        if (metrics.width > maxWidth && i > 0) {
            if (lineCount + 1 === maxLines) {
              // Replace the last character with an ellipsis
              context.fillText(line.substring(0, line.length - 1) + '...', x, y);
              break
            }
            context.fillText(line, x, y);
            line = words[i] + ' ';
            y += lineHeight;
            lineCount++;
        }
        else {
            line = test;
        }
        
    }
            
    context.fillText(line, x, y);
  }


var ctx = document.getElementById('target').getContext('2d'),
    text = 'Antidisestablishmentarianism dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut antidisestablishmentarianism odio. Proin quis tortor orci. Etiam at risus et  justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum  laoreet. Nunc eu antidisestablishmentarianism orci. Quisque eget odio ac lectus vestibulum faucibus  eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus  tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate.';

ctx.font = '14px/1.4 arial, sans-serif';
ctx.fillStyle = '#2a2a2a';      

wrapText (ctx, text, 10, 20, 160, 18);

Wrapping-Algorithm-for-Multiline-Canvas-Text.markdown

Wrapping Algorithm for Multiline Canvas Text (+types and max line count support!)

A simple text wrapping algorithm for multiline canvas text. Does not support hyphenation but will break words that don’t fit on a line by themselves.

If the next word will exceed maxLines, the text will be truncated with an ellipsis. maxLines is uncapped by default.