From 63522d3f8269155a389470c4799ea6473ec9cf60 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 21 Nov 2023 17:11:32 -0500 Subject: [PATCH 01/10] adding debug page --- fixtures/debug.html | 173 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 fixtures/debug.html diff --git a/fixtures/debug.html b/fixtures/debug.html new file mode 100644 index 0000000..cf351d3 --- /dev/null +++ b/fixtures/debug.html @@ -0,0 +1,173 @@ + + + + + + Debug emoji confetti + + + + + + +

+ + + + + From be75f19226ee7bac4d2b60e310ab1960e700c02e Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 21 Nov 2023 17:20:24 -0500 Subject: [PATCH 02/10] drawing both debug scenarios on at the same time --- fixtures/debug.html | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/fixtures/debug.html b/fixtures/debug.html index cf351d3..90f8367 100644 --- a/fixtures/debug.html +++ b/fixtures/debug.html @@ -19,7 +19,7 @@

- + From b7c605094b5b414de5eceb458640ca0e12598260 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 21 Nov 2023 17:20:53 -0500 Subject: [PATCH 03/10] calculating a tight box about the text, with a single pixel padding all around --- src/confetti.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/confetti.js b/src/confetti.js index a67a345..f18c246 100644 --- a/src/confetti.js +++ b/src/confetti.js @@ -829,15 +829,21 @@ ctx.font = font; var size = ctx.measureText(text); - var width = Math.floor(size.width); - var height = Math.floor(size.fontBoundingBoxAscent + size.fontBoundingBoxDescent); + var width = Math.ceil(size.actualBoundingBoxRight + size.actualBoundingBoxLeft); + var height = Math.ceil(size.actualBoundingBoxAscent + size.actualBoundingBoxDescent); + + var padding = 2; + var x = size.actualBoundingBoxLeft + padding; + var y = size.actualBoundingBoxAscent + padding; + width += padding + padding; + height += padding + padding; canvas = new OffscreenCanvas(width, height); ctx = canvas.getContext('2d'); ctx.font = font; ctx.fillStyle = color; - ctx.fillText(text, 0, fontSize); + ctx.fillText(text, x, y); var scale = 1 / scalar; From fda523af239cab2db86d140bb4888dc0c3febfa4 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 21 Nov 2023 17:21:27 -0500 Subject: [PATCH 04/10] putting twemoji at the end (it appears to be unreliable... should it be removed actually?) --- src/confetti.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/confetti.js b/src/confetti.js index f18c246..d92a11a 100644 --- a/src/confetti.js +++ b/src/confetti.js @@ -808,7 +808,7 @@ scalar = 1, color = '#000000', // see https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/ - fontFamily = '"Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "system emoji", sans-serif'; + fontFamily = '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "Twemoji Mozilla", "system emoji", sans-serif'; if (typeof textData === 'string') { text = textData; From c6a81615534ec13e7da43880720fec9ef1aecad4 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 21 Nov 2023 17:40:46 -0500 Subject: [PATCH 05/10] cleaning up font family stuff --- fixtures/debug.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/fixtures/debug.html b/fixtures/debug.html index 90f8367..3d6961e 100644 --- a/fixtures/debug.html +++ b/fixtures/debug.html @@ -36,7 +36,7 @@ return fontFile.load(); })); - return fontName; + return `"${fontName}"`; }; const connectTest = ({ fontFamily }) => { @@ -87,7 +87,7 @@ const drawTransformedEmoji = async ({ fontFamily, canvas, ctx, offsetX = 0, offsetY = 0 }) => { ['🦄', '🍑', '🤣', '🐈'].forEach((text, idx) => { - const shape1 = confetti.shapeFromText({ text, scalar: 1, fontFamily}); + const shape1 = confetti.shapeFromText({ text, scalar: 1, fontFamily }); const shape2 = confetti.shapeFromText({ text, scalar: 2, fontFamily }); const shape5 = confetti.shapeFromText({ text, scalar: 5, fontFamily }); @@ -163,7 +163,10 @@ }; Promise.resolve().then(async () => { + // const fontFamily = null; const fontFamily = await loadFonts(); + console.log('loaded font:', fontFamily); + const canvas = document.querySelector('#debug-canvas'); const ctx = canvas.getContext('2d'); From 750c04c7290629b13e0701239a7b4676905f3cea Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 21 Nov 2023 17:46:10 -0500 Subject: [PATCH 06/10] logging an error if anything goes wrong --- fixtures/debug.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/fixtures/debug.html b/fixtures/debug.html index 3d6961e..7ea8ccc 100644 --- a/fixtures/debug.html +++ b/fixtures/debug.html @@ -165,7 +165,6 @@ Promise.resolve().then(async () => { // const fontFamily = null; const fontFamily = await loadFonts(); - console.log('loaded font:', fontFamily); const canvas = document.querySelector('#debug-canvas'); const ctx = canvas.getContext('2d'); @@ -174,6 +173,8 @@ await drawDebugEmoji({ fontFamily, canvas, ctx }); await drawTransformedEmoji({ fontFamily, canvas, ctx, offsetY: 200 }); + }).catch(e => { + console.log('something went wrong:', e); }); From 71511e5b2f318215bd37f9cc59d8592de1c88d16 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 21 Nov 2023 21:39:35 -0500 Subject: [PATCH 07/10] adding plain text rendering as well --- fixtures/debug.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/fixtures/debug.html b/fixtures/debug.html index 7ea8ccc..30af52d 100644 --- a/fixtures/debug.html +++ b/fixtures/debug.html @@ -20,6 +20,7 @@

+

- +