All geek questions in one place

How to justify text alignment in html5 canvas?

How can I align text in html5 canvas to justify "? In the code below, the text can be left / right / centered. I need to set align="justify" . Please suggest how this can 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); }
+6
source share
1 answer

HTML5 canvas does not support multi-line text drawing, so there is no real effect for the alignment type.

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

This is my implementation for passing words / lines:

  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 alignment there, you will have to add it to

+2
source

Source: https://habr.com/ru/post/891623/

More articles:


All Articles