fix

js/interactive_grid.js

@@ -134,9 +134,6 @@ function initializeEditorBefore() {
     canvas_before.addEventListener('mouseup', handleMouseUp);
     canvas_before.addEventListener('mouseleave', handleMouseLeave);
 
-    cellSizeX = canvas_before.width / gridSize;
-    cellSizeY = canvas_before.height / gridSize;
-
     canvas_before.addEventListener('click', (event) => {
         // const rect = canvas_before.getBoundingClientRect();
         // const scaleX = canvas_before.width / rect.width;
@@ -183,9 +180,6 @@ function initializeEditorAfter() {
     canvas_after.addEventListener('mouseup', handleMouseUp);
     canvas_after.addEventListener('mouseleave', handleMouseLeave);
 
-    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;
@@ -278,6 +272,8 @@ function importBackgroundBefore(image_bef) {
         canvasBg_bef = m;
         canvas_before.width = m.width;
         canvas_before.height = m.height;
+        cellSizeX = canvas_before.width / gridSize;
+        cellSizeY = canvas_before.height / gridSize;
         drawGridBefore();
     }
 }
@@ -299,6 +295,8 @@ function importBackgroundAfter(image_after) {
     m.onload = function () {
         canvas_after.width = m.width;
         canvas_after.height = m.height;
+        cellSizeX = canvas_after.width / gridSize;
+        cellSizeY = canvas_after.height / gridSize;
         canvasBg_aft = m;
         drawGridAfter();
     }