How to justify align text in html5 canvas?
10,022
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
Author by
Sangam254
Updated on July 20, 2022Comments
-
Sangam254 over 1 year
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); }
-
Sangam254 almost 13 yearsi 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..
-
Variant almost 13 yearsYuo cna utilize this justification algorithm: rose-hulman.edu/class/csse/csse221/200910/Projects/Markov/… should be fairly easy to implement in canvas