fix

js/interactive_grid.js

@@ -79,25 +79,6 @@ 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();
@@ -158,8 +139,12 @@ function initializeEditorBefore() {
 
     canvas_before.addEventListener('click', (event) => {
         const rect = canvas_before.getBoundingClientRect();
-        const scaleX = canvas_before.width / rect.width;
-        const scaleY = canvas_before.height / rect.height;
+
+        const bgWidth = canvasBg_bef.width;
+        const bgHeight = canvasBg_bef.height;
+
+        const scaleX = canvas_before.width / bgWidth//rect.width;
+        const scaleY = canvas_before.height / bgHeight//rect.height;
         const x = (event.clientX - rect.left) * scaleX;
         const y = (event.clientY - rect.top) * scaleY;
         const row = Math.floor(y / cellSizeY);
@@ -206,8 +191,12 @@ function initializeEditorAfter() {
 
     canvas_after.addEventListener('click', (event) => {
         const rect = canvas_after.getBoundingClientRect();
-        const scaleX = canvas_after.width / rect.width;
-        const scaleY = canvas_after.height / rect.height;
+        
+        const bgWidth = canvasBg_aft.width;
+        const bgHeight = canvasBg_aft.height;
+
+        const scaleX = canvas_after.width / bgWidth//rect.width;
+        const scaleY = canvas_after.height / bgHeight//rect.height;
         const x = (event.clientX - rect.left) * scaleX;
         const y = (event.clientY - rect.top) * scaleY;
         const row = Math.floor(y / cellSizeY);