Word wrapping is unpleasant

util/Canvas.js

@@ -220,15 +220,42 @@ module.exports = class CanvasUtil {
 			for (let j = 0; j < words.length; j++) {
 				const word = words[j];
 				if (ctx.measureText(`${currentLine} ${word}`).width <= maxWidth) {
-					currentLine += `${currentLine === '' ? '' : ' '}${word}`;
+					currentLine += `${currentLine === '' ? '' : ' '} ${word}`;
 				} else {
-					lines.push(currentLine.trim());
+					if (ctx.measureText(word).width > maxWidth) {
-					currentLine = word;
+						const chunks = [];
+						let currentChunk = '';
+						for (let k = 0; k < word.length; k++) {
+							const char = word[k];
+							if (ctx.measureText(`${currentChunk}${char}`).width <= maxWidth) {
+								currentChunk += char;
+							} else {
+								chunks.push(currentChunk);
+								currentChunk = char;
+							}
+						}
+						if (currentChunk !== '') {
+							chunks.push(currentChunk);
+						}
+						for (let k = 0; k < chunks.length; k++) {
+							if (ctx.measureText(`${currentLine} ${chunks[k]}`).width > maxWidth) {
+								lines.push(currentLine.trim());
+								currentLine = '';
+							}
+							currentLine += `${currentLine === '' ? '' : ' '} ${chunks[k]}`;
+						}
+					} else {
+						lines.push(currentLine.trim());
+						currentLine = word;
+					}
 				}
 			}
 			if (currentLine !== '') {
 				lines.push(currentLine.trim());
 			}
+			if (i < wordsAndBreaks.length - 1) {
+				lines.push('');
+			}
 		}
 		return lines;
 	}