Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save samhenrigold/b10a4bcc76473648835b60aa1d067428 to your computer and use it in GitHub Desktop.
Save samhenrigold/b10a4bcc76473648835b60aa1d067428 to your computer and use it in GitHub Desktop.
<canvas width="600" height="800" id="target"></canvas>
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 (+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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment