fix

js/interactive_grid.js

@@ -79,12 +79,31 @@ function handleMouseLeave(event) {
 function drawGridBefore() {
     ctx_bef.clearRect(0, 0, canvas_before.width, canvas_before.height);
     drawBackgroundBefore();
+
+    const canvasWidth = canvas_before.width;
+    const canvasHeight = canvas_before.height;
+
+    const bgWidth = canvasBg_bef.width;
+    const bgHeight = canvasBg_bef.height;
+
+    const scaleX = canvasWidth / bgWidth;
+    const scaleY = canvasHeight / bgHeight;
+
+    const scale = Math.min(scaleX, scaleY);
+
+    const newWidth = bgWidth * scale;
+    const newHeight = bgHeight * scale;
+
+    const xOffset = (canvasWidth - newWidth) / 2;
+    const yOffset = (canvasHeight - newHeight) / 2;
+
+
     for (let row = 0; row < gridSize; row++) {
         for (let col = 0; col < gridSize; col++) {
             ctx_bef.beginPath();
             ctx_bef.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             ctx_bef.strokeStyle = 'black';
-            ctx_bef.lineWidth = 1;
+            ctx_bef.lineWidth = 0;
             ctx_bef.stroke();
 
             if (grid_bef[row][col]) {
@@ -105,7 +124,7 @@ function drawGridAfter() {
             ctx_aft.beginPath();
             ctx_aft.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             ctx_aft.strokeStyle = 'black';
-            ctx_aft.lineWidth = 1;
+            ctx_aft.lineWidth = 0;
             ctx_aft.stroke();
 
             if (grid_aft[row][col]) {