From 3947aafeba74e3f1da215fbc3e2af498408cc17d Mon Sep 17 00:00:00 2001
From: Mergan <mergan@viridianpatriots.com>
Date: Tue, 12 Sep 2023 04:08:47 -0700
Subject: [PATCH] Aligning canvas to image

---
 src/components/still-image/still-image.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 93fa0022..3872685c 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -144,10 +144,14 @@ const StillImage = {
     
       // Use requestAnimationFrame to schedule the scaling to the next frame
       requestAnimationFrame(() => {
+        // Compute scaling ratio between the natural dimensions of the image and its display dimensions
+        const scalingRatioWidth = parentElement.clientWidth / image.naturalWidth;
+        const scalingRatioHeight = parentElement.clientHeight / image.naturalHeight;
+
         // Adjust for high-DPI displays
         const ratio = window.devicePixelRatio || 1;
-        canvas.width = parentElement.clientWidth * ratio;
-        canvas.height = parentElement.clientHeight * ratio;
+        canvas.width = image.naturalWidth * scalingRatioWidth * ratio;
+        canvas.height = image.naturalHeight * scalingRatioHeight * ratio;
         canvas.style.width = `${parentElement.clientWidth}px`;
         canvas.style.height = `${parentElement.clientHeight}px`;
         context.scale(ratio, ratio);