WIP: Makes font smaller but test is shown as whole and in multiline

This commit is contained in:
Dimitrios Kaitantzidis 2023-10-08 15:51:40 +03:00
parent 88a90f22a3
commit a71e813e82

View file

@ -202,50 +202,33 @@ select#font-select, select#font-select option {
function addDraggableFromText() { function addDraggableFromText() {
const sigText = document.getElementById('sigText').value; const sigText = document.getElementById('sigText').value;
const font = document.querySelector('select[name=font]').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 fontSize = 100;
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.font = `${fontSize}px ${font}`; ctx.font = `${fontSize}px ${font}`;
const textWidth = ctx.measureText(sigText).width;
let yAxis = fontSize * .4; const textHeight = fontSize;
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;
canvas.width = textWidth; canvas.width = textWidth;
canvas.height = textHeight*1.35; //for tails canvas.height = textHeight*1.35; //for tails
ctx.font = `${fontSize}px ${font}`; // ctx.font = `${fontSize / 2}px ${font}`;
// console.log(sigText); ctx.font = `${fontSize / 2}px ${font}`;
console.log(sigText.split(/\r?\n/)); 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); // ctx.fillText(sigText, 0, fontSize);