Menu
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);
}
279
In order to suggest that some text be justified on both sides, you can use the align="justify" attribute in HTML, or the text-align:justify declaration in CSS, or both.
To align HTML5 Canvas text, we can use the textAlign property of the canvas context, which can be set to start, end, left, center, or right. The alignment is relative to an imaginary vertical line at the x position of the text defind by fillText() or strokeText().
HTML Align Text Right We can apply the CSS rule text-align: right to all H2s to right justify them: HTML.
How do I vertically align text in canvas? To vertically align text with HTML5 Canvas, we can use the textBaseline property of the canvas context. textBaseline can be set with one of the following values: top, hanging, middle, alphabetic, ideographic, and bottom.
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
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
