+ Added font and text size to settings panel

www/index.html

@@ -91,6 +91,19 @@
                         <input type="checkbox" name="dump" data-key />
                         <span data-i18n="dump-traffic">Dump Traffic</span>
                     </label> -->
+                    <label data-i18n="text-font">Text font</label>
+                    <select id="text-font">
+                        <option value="Serif">Serif</option>
+                        <option value="Sans-serif" selected>Sans-serif</option>
+                        <option value="monospace">Monospace</option>
+                        <option value="cursive">Cursive</option>
+                    </select>
+                    <br>
+                    <label>
+                        <span data-i18n="text-size-">Text size:</span>
+                        <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
+                        <span>px</span>
+                    </label>
                     <button id="set-accessibility" data-key>
                         <span>🌎</span>
                         <span data-i18n="accessibility">Accessibility</span>

www/main.js

@@ -439,31 +439,46 @@ class CanvasController {
         }
     }
     insertText() {
-        let text = prompt("Enter text");
+        
-        let lines = [];
+        const textSize = parseInt(document.getElementById("text-size").value);
+        const textFont = document.getElementById("text-font").value;
+        const yStep = textSize;
+        
+        const ctx = this.canvas.getContext("2d");
+        ctx.font = textSize + "px " + textFont;
+        // const textWidth = ctx.measureText(textSize);
+        const maxWidth = this.canvas.width - 10;
 
+        
+        let text = prompt("Enter text");
+        if (text == null) { return; }
+        
         // Use Word Wrap to split the text over multiple lines
+        let lines = [];
+        const getMaxCharsPerLine = (text, ctx) => {
+            let textWidth = ctx.measureText(text).width;
+            let textIndex = maxWidth / textWidth;
+
+            if (textIndex > 1) { return text.length}
+            return Math.floor(textIndex * text.length); 
+        }
         const wrapText = (text, maxLength) => {
             let splitPos = maxLength - 1;
             while (text[splitPos] != " " && splitPos > 0) {
                 splitPos--;
             }
             if (splitPos == 0) { splitPos = maxLength; }
-            return [text.slice(0, splitPos), text.slice(splitPos, text.length)];
+            return [text.slice(0, splitPos).trim(), text.slice(splitPos, text.length).trim()];
         }
 
-        const maxLength = 33;
+        while (ctx.measureText(text).width > maxWidth) {
-        while (text.length > maxLength) {
             let line;
-            [line, text] = wrapText(text, maxLength);
+            [line, text] = wrapText(text, getMaxCharsPerLine(text, ctx));
             lines.push(line);
         }
         lines.push(text)
 
-        let ctx = this.canvas.getContext("2d");
-        ctx.font = "20px Sans-Serif";
 
-        const yStep = 20;
         let yPos = yStep;
         for (let line of lines) {
             ctx.fillText(line, 0, yPos);