61

I am trying to add text on an image using the <canvas> element. First the image is drawn and on the image the text is drawn. So far so good.

But where I am facing a problem is that if the text is too long, it gets cut off in the start and end by the canvas. I don't plan to resize the canvas, but I was wondering how to wrap the long text into multiple lines so that all of it gets displayed. Can anyone point me at the right direction?

1
  • 3
    fwiw, Fabric.js has extensive text support on canvas (multiline, text styles, decoration, strokes, etc.)
    – kangax
    Aug 27, 2013 at 13:02

11 Answers 11

64

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!

4
  • I don't know if it is your intention or not, but It doesn't handle new line characters.
    – Jason
    Sep 2, 2017 at 2:33
  • 3
    @Jason: That is easy to fix, just wrap it in your own function, something like: function getLinesForParagraphs(ctx, text, maxWidth) { return text.split("\n").map(para => getLines(ctx, para, maxWidth)).reduce([], (a, b) => a.concat(b)) }
    – crazy2be
    Sep 13, 2017 at 21:50
  • This won't work for language with block characters, for example, Chinese.
    – Junle Li
    May 13, 2019 at 4:37
  • 2
    @JunleLi: Doing word wrapping correctly for all languages turns out to be complicated[1], but you can get a lot closer for languages with block characters by doing var words = text.split(""), rather than splitting on spaces (note that this will split in the middle of words in Latin-alphabet languages). A better solution would parse the words and split depending on language (so block characters and Latin words could be intermixed and correctly broken). A truly correct solution requires the use of a dictionary. [1] w3c.github.io/i18n-drafts/articles/typography/linebreak.en
    – crazy2be
    May 29, 2019 at 17:17
23

A possible method (not completely tested, but as for now it worked perfectly)

    /**
     * Divide an entire phrase in an array of phrases, all with the max pixel length given.
     * The words are initially separated by the space char.
     * @param phrase
     * @param length
     * @return
     */
function getLines(ctx,phrase,maxPxLength,textStyle) {
    var wa=phrase.split(" "),
        phraseArray=[],
        lastPhrase=wa[0],
        measure=0,
        splitChar=" ";
    if (wa.length <= 1) {
        return wa
    }
    ctx.font = textStyle;
    for (var i=1;i<wa.length;i++) {
        var w=wa[i];
        measure=ctx.measureText(lastPhrase+splitChar+w).width;
        if (measure<maxPxLength) {
            lastPhrase+=(splitChar+w);
        } else {
            phraseArray.push(lastPhrase);
            lastPhrase=w;
        }
        if (i===wa.length-1) {
            phraseArray.push(lastPhrase);
            break;
        }
    }
    return phraseArray;
}
2
  • 1
    This returns an empty array if phrase contains only one word. Jun 6, 2015 at 2:30
  • Just as a suggestion - after doing some perfs I found that measuring each character one at a time and caching the result of each character then adding the individual character widths together, even though it may seem expensive, is actually faster than canvas measureText
    – notrota
    May 1, 2018 at 8:31
8

Here was my spin on it... I read @mizar's answer and made some alterations to it... and with a little assistance I Was able to get this.

code removed, see fiddle.

Here is example usage. http://jsfiddle.net/9PvMU/1/ - this script can also be seen here and ended up being what I used in the end... this function assumes ctx is available in the parent scope... if not you can always pass it in.


edit

the post was old and had my version of the function that I was still tinkering with. This version seems to have met my needs thus far and I hope it can help anyone else.


edit

It was brought to my attention there was a small bug in this code. It took me some time to get around to fixing it but here it is updated. I have tested it myself and it seems to work as expected now.

function fragmentText(text, maxWidth) {
    var words = text.split(' '),
        lines = [],
        line = "";
    if (ctx.measureText(text).width < maxWidth) {
        return [text];
    }
    while (words.length > 0) {
        var split = false;
        while (ctx.measureText(words[0]).width >= maxWidth) {
            var tmp = words[0];
            words[0] = tmp.slice(0, -1);
            if (!split) {
                split = true;
                words.splice(1, 0, tmp.slice(-1));
            } else {
                words[1] = tmp.slice(-1) + words[1];
            }
        }
        if (ctx.measureText(line + words[0]).width < maxWidth) {
            line += words.shift() + " ";
        } else {
            lines.push(line);
            line = "";
        }
        if (words.length === 0) {
            lines.push(line);
        }
    }
    return lines;
}
3
  • 1
    it doesn't recognizes 'ENTER' value. And if user enters a long word/characters that beyond the maxWidth allowed, it doesn't produce space for the following word. Any suggestion?
    – Ivo San
    Feb 19, 2013 at 3:32
  • it shouldn't recognize enter value, it's not built that way. however if you listened for it you could force a new line I suppose. And you are right, I have never noticed this bug before. I will look into it and update my answer.
    – rlemon
    Feb 28, 2013 at 0:52
  • @ivory-santos the maxWidth trimming space is now fixed.
    – rlemon
    Apr 14, 2013 at 14:59
6

context.measureText(text).width is what you're looking for...

4

Try this script to wrap the text on a canvas.

 <script>
  function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = ctx.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        ctx.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    ctx.fillText(line, x, y);
  }

  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');
  var maxWidth = 400;
  var lineHeight = 24;
  var x = (canvas.width - maxWidth) / 2;
  var y = 70;
  var text = 'HTML is the language for describing the structure of Web pages. HTML stands for HyperText Markup Language. Web pages consist of markup tags and plain text. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>..';

  ctx.font = '15pt Calibri';
  ctx.fillStyle = '#555555';

  wrapText(ctx, text, x, y, maxWidth, lineHeight);
  </script>
</body>

See demo here http://codetutorial.com/examples-canvas/canvas-examples-text-wrap.

3

From the script here: http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/

I've extended to include paragraph support. Use \n for new line.

function wrapText(context, text, x, y, line_width, line_height)
{
    var line = '';
    var paragraphs = text.split('\n');
    for (var i = 0; i < paragraphs.length; i++)
    {
        var words = paragraphs[i].split(' ');
        for (var n = 0; n < words.length; n++)
        {
            var testLine = line + words[n] + ' ';
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;
            if (testWidth > line_width && n > 0)
            {
                context.fillText(line, x, y);
                line = words[n] + ' ';
                y += line_height;
            }
            else
            {
                line = testLine;
            }
        }
        context.fillText(line, x, y);
        y += line_height;
        line = '';
    }
}

Text can be formatted like so:

var text = 
[
    "Paragraph 1.",
    "\n\n",
    "Paragraph 2."
].join("");

Use:

wrapText(context, text, x, y, line_width, line_height);

in place of

context.fillText(text, x, y);
0
3

I am posting my own version used here since answers here weren't sufficient for me. The first word needed to be measured in my case, to be able to deny too long words from small canvas areas. And I needed support for 'break+space, 'space+break' or double-break/paragraph-break combos.

wrapLines: function(ctx, text, maxWidth) {
    var lines = [],
        words = text.replace(/\n\n/g,' ` ').replace(/(\n\s|\s\n)/g,'\r')
        .replace(/\s\s/g,' ').replace('`',' ').replace(/(\r|\n)/g,' '+' ').split(' '),
        space = ctx.measureText(' ').width,
        width = 0,
        line = '',
        word = '',
        len = words.length,
        w = 0,
        i;
    for (i = 0; i < len; i++) {
        word = words[i];
        w = word ? ctx.measureText(word).width : 0;
        if (w) {
            width = width + space + w;
        }
        if (w > maxWidth) {
            return [];
        } else if (w && width < maxWidth) {
            line += (i ? ' ' : '') + word;
        } else {
            !i || lines.push(line !== '' ? line.trim() : '');
            line = word;
            width = w;
        }
    }
    if (len !== i || line !== '') {
        lines.push(line);
    }
    return lines;
}

It supports any variants of lines breaks, or paragraph breaks, removes double spaces, as well as leading or trailing paragraph breaks. It returns either an empty array if the text doesn't fit. Or an array of lines ready to draw.

1

look at https://developer.mozilla.org/en/Drawing_text_using_a_canvas#measureText%28%29

If you can see the selected text, and see its wider than your canvas, you can remove words, until the text is short enough. With the removed words, you can start at the second line and do the same.

Of course, this will not be very efficient, so you can improve it by not removing one word, but multiple words if you see the text is much wider than the canvas width.

I did not research, but maybe their are even javascript libraries that do this for you

1

I modified it using the code from here http://miteshmaheta.blogspot.sg/2012/07/html5-wrap-text-in-canvas.html

var canvas = document.getElementById('cvs'),
  ctx = canvas.getContext('2d'),
  input = document.getElementById('input'),
  width = +(canvas.width = 400),
  height = +(canvas.height = 250),
  fontFamily = "Arial",
  fontSize = "24px",
  fontColour = "blue";

function wrapText(context, text, x, y, maxWidth, lineHeight) {
  var words = text.split(" ");
  var line = "";
  for (var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + " ";
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth) {
      context.fillText(line, x, y);
      line = words[n] + " ";
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);
}

function draw() {
  ctx.save();
  ctx.clearRect(0, 0, width, height);
  //var lines = makeLines(input.value, width - parseInt(fontSize,0));
  //lines.forEach(function(line, i) {
  //    ctx.fillText(line, width / 2, height - ((i + 1) * parseInt(fontSize,0)));
  //});
  wrapText(ctx, input.value, x, y, (canvas.width - 8), 25)
  ctx.restore();
}

input.onkeyup = function(e) { // keyup because we need to know what the entered text is.
  draw();
};

var text = "HTML5 Wrap Text functionsdfasdfasdfsadfasdfasdfasdfasdfasdf in Javascript written here is helped me a lot.";
var x = 20;
var y = 20;
wrapText(ctx, text, x, y, (canvas.width - 8), 25)
body {
  background-color: #efefef;
}

canvas {
  outline: 1px solid #000;
  background-color: white;
}
<canvas id="cvs"></canvas><br />
<input type="text" id="input" />

0

This should bring the lines correctly from the textbox:-

 function fragmentText(text, maxWidth) {
    var lines = text.split("\n");
    var fittingLines = [];
    for (var i = 0; i < lines.length; i++) {
        if (canvasContext.measureText(lines[i]).width <= maxWidth) {
            fittingLines.push(lines[i]);
        }
        else {
            var tmp = lines[i];
            while (canvasContext.measureText(tmp).width > maxWidth) {
                tmp = tmp.slice(0, tmp.length - 1);
            }
            if (tmp.length >= 1) {
                var regex = new RegExp(".{1," + tmp.length + "}", "g");
                var thisLineSplitted = lines[i].match(regex);
                for (var j = 0; j < thisLineSplitted.length; j++) {
                    fittingLines.push(thisLineSplitted[j]);
                }
            }
        }
    }
    return fittingLines;

And then get draw the fetched lines on the canvas :-

 var lines = fragmentText(textBoxText, (rect.w - 10)); //rect.w = canvas width, rect.h = canvas height
                    for (var showLines = 0; showLines < lines.length; showLines++) { // do not show lines that go beyond the height
                        if ((showLines * resultFont.height) >= (rect.h - 10)) {      // of the canvas
                            break;
                        }
                    }
                    for (var i = 1; i <= showLines; i++) {
                        canvasContext.fillText(lines[i-1], rect.clientX +5 , rect.clientY + 10 + (i * (resultFont.height))); // resultfont = get the font height using some sort of calculation
                    }
0

This is a typescript version of @JBelfort's answer. (By the way, thanks for this brilliant code)

As he mentioned in his answer this code can simulate html element such as textarea,and also the CSS property

word-break: break-all

I added canvas location parameters (x, y and lineHeight)

function wrapText(
  ctx: CanvasRenderingContext2D,
  text: string,
  maxWidth: number,
  x: number,
  y: number,
  lineHeight: number
) {
  const xOffset = x;
  let yOffset = y;
  const lines = text.split('\n');
  const fittingLines: [string, number, number][] = [];
  for (let i = 0; i < lines.length; i++) {
    if (ctx.measureText(lines[i]).width <= maxWidth) {
      fittingLines.push([lines[i], xOffset, yOffset]);
      yOffset += lineHeight;
    } else {
      let tmp = lines[i];
      while (ctx.measureText(tmp).width > maxWidth) {
        tmp = tmp.slice(0, tmp.length - 1);
      }
      if (tmp.length >= 1) {
        const regex = new RegExp(`.{1,${tmp.length}}`, 'g');
        const thisLineSplitted = lines[i].match(regex);
        for (let j = 0; j < thisLineSplitted!.length; j++) {
          fittingLines.push([thisLineSplitted![j], xOffset, yOffset]);
          yOffset += lineHeight;
        }
      }
    }
  }
  return fittingLines;
}

and you can just use this like

const wrappedText = wrapText(ctx, dialog, 200, 100, 200, 50);
wrappedText.forEach(function (text) {
  ctx.fillText(...text);
});
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.