fix

js/interactive_grid.js

@@ -125,7 +125,7 @@ function initializeEditorBefore() {
 
     image_bef = document.getElementById('image-before');
     canvas_before = document.getElementById('before');
-    ctx_bef = canvas.getContext('2d');
+    ctx_bef = canvas_before.getContext('2d');
 
     // Add click event listener to canvas
     canvas_before.addEventListener('mousedown', handleMouseDown);
@@ -133,7 +133,7 @@ function initializeEditorBefore() {
     canvas_before.addEventListener('mouseup', handleMouseUp);
     canvas_before.addEventListener('mouseleave', handleMouseLeave);
 
-    cellSize = canvas.width / gridSize;
+    cellSize = canvas_before.width / gridSize;
 
     canvas_before.addEventListener('click', (event) => {
         const rect = canvas_before.getBoundingClientRect();
@@ -255,15 +255,15 @@ function drawBackgroundAfter() {
     }
 }
 
-function importBackgroundBefore(image) {
-    if (image == null) {
+function importBackgroundBefore(image_bef) {
+    if (image_bef == null) {
         canvasBg_bef = null;
         drawGridBefore();
         return;
     }
 
     let m = new Image();
-    m.src = image;
+    m.src = image_bef;
     m.onload = function () {
         canvasBg_bef = m;
         drawGridBefore();
@@ -271,15 +271,15 @@ function importBackgroundBefore(image) {
 }
 
 
-function importBackgroundAfter(image) {
-    if (image == null) {
+function importBackgroundAfter(image_after) {
+    if (image_after == null) {
         canvasBg_aft = null;
         drawGridAfter();
         return;
     }
 
     let m = new Image();
-    m.src = image;
+    m.src = image_after;
     m.onload = function () {
         canvasBg_aft = m;
         drawGridAfter();