11

How can I align text within a html5 canvas to justify"? In the code below, text can be left/right/center aligned. I need to set align="justify". Please suggest how can this be done?

HTML:

<body onload="callMe()">
    <canvas id="MyCanvas"></canvas>
</body>

JS:

function callMe() {
    var canvas = document.getElementById("MyCanvas");
    var ctx = canvas.getContext("2d");
    var txt = "Welcome to the new hello world example";
    cxt.font = "10pt Arial";
    cxt.textAlign = "left";

    /* code to text wrap*/
    cxt.fillText(txt, 10, 20);
}
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
Sangam254
  • 3,415
  • 11
  • 33
  • 43
  • Interesting question :). It would help a bit though if you'd format your question a bit more, specially the code bit ;) – Jeroen Jun 29 '11 at 08:55

1 Answers1

6

HTML5's canvas doesn't support multiline text drawing so there is no real effect to the alignment type.

If you want to support line-feeds, you have to support it yourself, you can see a previous discussion about it here: HTML5 Canvas - can I somehow use linefeeds in fillText()?

This is my implementation for word-wrap / line feeds:

    function printAtWordWrap(context, text, x, y, lineHeight, fitWidth) {
        fitWidth = fitWidth || 0;
        lineHeight = lineHeight || 20;

        var currentLine = 0;

        var lines = text.split(/\r\n|\r|\n/);
        for (var line = 0; line < lines.length; line++) {


            if (fitWidth <= 0) {
                context.fillText(lines[line], x, y + (lineHeight * currentLine));
            } else {
                var words = lines[line].split(' ');
                var idx = 1;
                while (words.length > 0 && idx <= words.length) {
                    var str = words.slice(0, idx).join(' ');
                    var w = context.measureText(str).width;
                    if (w > fitWidth) {
                        if (idx == 1) {
                            idx = 2;
                        }
                        context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * currentLine));
                        currentLine++;
                        words = words.splice(idx - 1);
                        idx = 1;
                    }
                    else
                    { idx++; }
                }
                if (idx > 0)
                    context.fillText(words.join(' '), x, y + (lineHeight * currentLine));
            }
            currentLine++;
        }
    }

there is no support for alignment or justification there, you'll have to add it in

Community
  • 1
  • 1
Variant
  • 17,279
  • 4
  • 40
  • 65
  • i could break a sentence based on newline and put the rest of the text in next line(ie multiline) I can align it to center/right/left using textAlign .But I cant align it to justify.. – Sangam254 Jun 29 '11 at 09:03
  • 3
    Yuo cna utilize this justification algorithm: https://www.rose-hulman.edu/class/csse/csse221/200910/Projects/Markov/justification.html should be fairly easy to implement in canvas – Variant Jun 29 '11 at 09:27