A Pen by Peter Hrynkow.

index.html

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

script.js

function wrapText (context, text, x, y, maxWidth, lineHeight) {
    
    var 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].substr(test.length))
            words[i] = test;
        }  

        test = line + words[i] + ' ';  
        metrics = context.measureText(test);
        
        if (metrics.width > maxWidth && i > 0) {
            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

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.

A Pen by Peter Hrynkow on CodePen.

License.