fix

js/interactive_grid.js

@@ -107,7 +107,7 @@ function drawGridBefore() {
 
             if (grid_bef[row][col]) {
                 ctx_bef.fillStyle = 'rgba(0, 255, 0, 0.5)';
-                ctx_bef.fillRect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
+                ctx_bef.fillRect(xOffset + col * cellSizeX, yOffset + row * cellSizeY, cellSizeX, cellSizeY);
             }
         }
     }
@@ -119,27 +119,10 @@ function drawGridAfter() {
     ctx_aft.clearRect(0, 0, canvas_after.width, canvas_after.height);
     drawBackgroundAfter();
 
-    const canvasWidth = canvas_after.width;
-    const canvasHeight = canvas_after.height;
-
-    const bgWidth = canvasBg_aft.width;
-    const bgHeight = canvasBg_aft.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_aft.beginPath();
-            ctx_aft.rect(xOffset + col * cellSizeX, yOffset + row * cellSizeY, cellSizeX, cellSizeY);
+            ctx_aft.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             ctx_aft.strokeStyle = 'black';
             ctx_aft.lineWidth = 1;
             ctx_aft.stroke();
@@ -200,8 +183,8 @@ function initializeEditorBefore() {
         // const scaleY = canvas_before.height / rect.height;
         // const x = (event.clientX - rect.left) * scaleX;
         // const y = (event.clientY - rect.top) * scaleY;
-        const x = (event.clientX - xOffset) * scaleX;
-        const y = (event.clientY - yOffset) * scaleY;
+        const x = (event.clientX - xOffset) * scale;
+        const y = (event.clientY - yOffset) * scale;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);
 
@@ -241,37 +224,15 @@ function initializeEditorAfter() {
     canvas_after.addEventListener('mouseup', handleMouseUp);
     canvas_after.addEventListener('mouseleave', handleMouseLeave);
 
-    const canvasWidth = canvas_after.width;
-    const canvasHeight = canvas_after.height;
-
-    const bgWidth = canvasBg_aft.width;
-    const bgHeight = canvasBg_aft.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;
-
-    // cellSizeX = canvas_after.width / gridSize;
-    // cellSizeY = canvas_after.height / gridSize;
-
-    cellSizeX = newWidth / gridSize;
-    cellSizeY = newHeight / gridSize;
+    cellSizeX = canvas_after.width / gridSize;
+    cellSizeY = canvas_after.height / gridSize;
 
     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 x = (event.clientX - rect.left) * scaleX;
-        // const y = (event.clientY - rect.top) * scaleY;
-        const x = (event.clientX - xOffset) * scaleX;
-        const y = (event.clientY - yOffset) * scaleY;
+        const rect = canvas_after.getBoundingClientRect();
+        const scaleX = canvas_after.width / rect.width;
+        const scaleY = canvas_after.height / rect.height;
+        const x = (event.clientX - rect.left) * scaleX;
+        const y = (event.clientY - rect.top) * scaleY;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);
 
@@ -365,6 +326,8 @@ function importBackgroundAfter(image_after) {
     let m = new Image();
     m.src = image_after;
     m.onload = function () {
+        canvas_after.width = m.width;
+        canvas_after.height = m.height;
         canvasBg_aft = m;
         drawGridAfter();
     }