From b0f8f56650d56878a7b24c7ea420a6f2d48181a5 Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis Date: Sun, 8 Oct 2023 15:58:23 +0300 Subject: [PATCH] WIP: Letters are now inside canvas, and multiline support is functional. There is a small bug where when there are a lot of multiple lines, the font gets smaller. --- src/main/resources/templates/sign.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 5b72dc30..7584a72b 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -210,12 +210,14 @@ select#font-select, select#font-select option { const textWidth = ctx.measureText(sigText).width; const textHeight = fontSize; - canvas.width = textWidth; - canvas.height = textHeight*1.35; //for tails - // ctx.font = `${fontSize / 2}px ${font}`; - ctx.font = `${fontSize / 2}px ${font}`; let paragraphs = sigText.split(/\r?\n/); + canvas.width = textWidth; + canvas.height = paragraphs.length * textHeight*1.35; //for tails + // ctx.font = `${fontSize / 2}px ${font}`; + ctx.font = `${fontSize}px ${font}`; + + ctx.textBaseline = 'top'; // let y = fontSize; @@ -227,10 +229,9 @@ select#font-select, select#font-select option { paragraphs.forEach(paragraph => { // ctx.letterSpacing = "50px"; ctx.fillText(paragraph, 0, y); - y += 24; + y += fontSize; }); - // ctx.fillText(sigText, 0, fontSize); const dataURL = canvas.toDataURL();