From a71e813e82eb1135a239a2216b916d58e8a9eb3e Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis Date: Sun, 8 Oct 2023 15:51:40 +0300 Subject: [PATCH] WIP: Makes font smaller but test is shown as whole and in multiline --- src/main/resources/templates/sign.html | 53 +++++++++----------------- 1 file changed, 18 insertions(+), 35 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 54aa5a8d..5b72dc30 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -202,50 +202,33 @@ select#font-select, select#font-select option { function addDraggableFromText() { const sigText = document.getElementById('sigText').value; const font = document.querySelector('select[name=font]').value; - // const fontSize = document.querySelector('select[name=size]').value; - // console.log("fontSize: " + fontSize) const fontSize = 100; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = `${fontSize}px ${font}`; - - let yAxis = fontSize * .4; - - let paragraphs = sigText.split(/\r?\n/); - - let lengthiestParagraph = paragraphs[0]; - - for (let i = 0; i < paragraphs.length; i++) { - let previousParagraph; - let currentParagraph = paragraphs[i]; - - if (i === 0) { - previousParagraph = ''; - } else { - previousParagraph = paragraphs[i-1]; - } - - if (currentParagraph.length > previousParagraph.length) - lengthiestParagraph = currentParagraph; - - - ctx.fillText(currentParagraph, 0, yAxis, fontSize); - yAxis += fontSize * .8; - } - - console.log("lengthiest pagragraph: " + lengthiestParagraph); - - const textWidth = ctx.measureText(lengthiestParagraph).width; - // const textHeight = fontSize; - const textHeight = fontSize * 1.6; + const textWidth = ctx.measureText(sigText).width; + const textHeight = fontSize; canvas.width = textWidth; canvas.height = textHeight*1.35; //for tails - ctx.font = `${fontSize}px ${font}`; - // console.log(sigText); - console.log(sigText.split(/\r?\n/)); + // ctx.font = `${fontSize / 2}px ${font}`; + ctx.font = `${fontSize / 2}px ${font}`; + let paragraphs = sigText.split(/\r?\n/); + ctx.textBaseline = 'top'; + + // let y = fontSize; + let y = 0; + + console.log(paragraphs); + console.log(canvas.height); + + paragraphs.forEach(paragraph => { + // ctx.letterSpacing = "50px"; + ctx.fillText(paragraph, 0, y); + y += 24; + }); // ctx.fillText(sigText, 0, fontSize);