From 4c57237a3157692f48196c69f1219cc03ee7be09 Mon Sep 17 00:00:00 2001
From: Florent Chehab <flo@nextmile.fr>
Date: Thu, 12 Mar 2026 14:15:23 +0100
Subject: [PATCH] fix(resizeImageToCover): switch to canvas to support Firefox

Previous implementation was producing distorted images on Firefox.
Switching to canvas based API which has better broader support.
---
 src/webgl/utils.ts | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/webgl/utils.ts b/src/webgl/utils.ts
index 03dac6a..ec4778c 100644
--- a/src/webgl/utils.ts
+++ b/src/webgl/utils.ts
@@ -115,24 +115,26 @@ export async function resizeImageToCover(
   let sWidth = image.width;
   let sHeight = image.height;
 
-  // For cover mode, we need to crop some parts of the image
-  // to ensure it covers the canvas while maintaining aspect ratio
   if (imgAspect > targetAspect) {
-    // Image is wider than target - crop the sides
-    sWidth = Math.round(image.height * targetAspect);
-    sx = Math.round((image.width - sWidth) / 2); // Center the crop horizontally
+    // Source is wider than target: crop left/right
+    sWidth = image.height * targetAspect;
+    sx = (image.width - sWidth) / 2;
   } else if (imgAspect < targetAspect) {
-    // Image is taller than target - crop the top/bottom
-    sHeight = Math.round(image.width / targetAspect);
-    sy = Math.round((image.height - sHeight) / 2); // Center the crop vertically
+    // Source is taller than target: crop top/bottom
+    sHeight = image.width / targetAspect;
+    sy = (image.height - sHeight) / 2;
   }
 
-  // Create a new ImageBitmap with the cropped portion
-  return createImageBitmap(image, sx, sy, sWidth, sHeight, {
-    resizeWidth: targetWidth,
-    resizeHeight: targetHeight,
-    resizeQuality: 'medium',
-  });
+  const canvas = new OffscreenCanvas(targetWidth, targetHeight);
+  const ctx = canvas.getContext('2d');
+
+  if (!ctx) {
+    throw new Error('Could not get 2D context');
+  }
+
+  ctx.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, targetWidth, targetHeight);
+
+  return createImageBitmap(canvas);
 }
 
 let emptyImageData: ImageData | undefined;