I am using highlightWallAroundPoint function to find detecs walls around where user clicks

  const highlightWallAroundPoint = (_, x, y) => {
    const lowerCanvas = fabricCanvas.lowerCanvasEl;
    const src = cv.imread(lowerCanvas);

    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);

    const blurred = new cv.Mat();
    cv.GaussianBlur(src, blurred, new cv.Size(5, 5), 0, 0, cv.BORDER_DEFAULT);

    const thresh = new cv.Mat();
    cv.adaptiveThreshold(
      blurred,
      thresh,
      255,
      cv.ADAPTIVE_THRESH_GAUSSIAN_C,
      cv.THRESH_BINARY_INV,
      11,
      2
    );

    const kernel = cv.Mat.ones(3, 3, cv.CV_8U);
    const dilation = new cv.Mat();
    cv.dilate(
      thresh,
      dilation,
      kernel,
      new cv.Point(-1, -1),
      1,
      cv.BORDER_CONSTANT,
      cv.morphologyDefaultBorderValue()
    );

    const contours = new cv.MatVector();
    const hierarchy = new cv.Mat();
    cv.findContours(
      dilation,
      contours,
      hierarchy,
      cv.RETR_TREE,
      cv.CHAIN_APPROX_SIMPLE
    );

    if (contours.size() > 0) {
      let closestDistance = Number.POSITIVE_INFINITY;
      let closestContourIndex = -1;

      for (let i = 0; i < contours.size(); ++i) {
        const contour = contours.get(i);
        const distance = cv.pointPolygonTest(contour, new cv.Point(x, y), true);
        if (distance > 0 && distance < closestDistance) {
          closestDistance = distance;
          closestContourIndex = i;
        }
      }

      cv.cvtColor(src, src, cv.COLOR_GRAY2RGBA, 0);

      if (closestContourIndex !== -1) {
        const closestContour = contours.get(closestContourIndex);

        const points = [];
        for (let j = 0; j < closestContour.data32S.length; j += 2) {
          const point = {
            x: closestContour.data32S[j],
            y: closestContour.data32S[j + 1],
          };
          points.push(point);
        }

        const epsilon = 0.01 * cv.arcLength(closestContour, true);
        const approxCurve = new cv.Mat();
        cv.approxPolyDP(closestContour, approxCurve, epsilon, true);

        const lines = [];
        for (let i = 0; i < approxCurve.rows - 1; i++) {
          const startPoint = new cv.Point(
            approxCurve.data32S[i * 2],
            approxCurve.data32S[i * 2 + 1]
          );
          const endPoint = new cv.Point(
            approxCurve.data32S[(i + 1) * 2],
            approxCurve.data32S[(i + 1) * 2 + 1]
          );
          lines.push({ startPoint, endPoint });
        }

        const { classifiedLines, droppedLines } = classifyLines(lines);



        classifiedLines.push({
          endPoint: classifiedLines[0].startPoint,
          startPoint: classifiedLines[classifiedLines.length - 1].endPoint,
        });

        const newLines = straightenShape(
          mergeLinesInSameDirection(fillGapsWithStraightLines(classifiedLines)),
          10
        );
        console.log("newLines: ", newLines);


        setOldVertices(newLines);

        setVertices(convertLinesToVertices(newLines));

        if (convertLinesToVertices(newLines)?.length > 0) {
          zoomToPoints(convertLinesToVertices(newLines));
        }

        const doorsCheck = convertToDoors(droppedLines);
        setDoorsCheck(doorsCheck);

        if (lineSegment && scaleCheck && lineDraw) {
          setLineBoundary(true);

          convertLinesToVertices(newLines)?.forEach((vertex) => {
            const points = vertex.points;
            for (let i = 0; i < points.length; i++) {
              const startPoint = points[i];
              const endPoint = points[(i + 1) % points.length]; // Loop back to the start for the last line
              const line = new fabric.Line(
                [startPoint.x, startPoint.y, endPoint.x, endPoint.y],
                {
                  stroke: "black", // Set the stroke color to black
                  strokeWidth: 1,
                  selectable: false,
                  strokeDashArray: [2, 2], // Set the dash array to create a dotted effect
                }
              );
              fabricCanvas.add(line);
            }
          });
        }

        setMode(true);
      }

      src.delete();
      blurred.delete();
      thresh.delete();
      kernel.delete();
      dilation.delete();
      contours.delete();
      hierarchy.delete();
    }
  };

Now whenever i scale down image so that it fits in canvas

  useEffect(() => {
    if (fabricCanvas && uploadImage && !imageAdded) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const dataUrl = e.target.result;
        fabric.Image.fromURL(dataUrl, (img) => {
          const canvasWidth = fabricCanvas.width;
          const canvasHeight = fabricCanvas.height;
          const imageWidth = img.width;
          const imageHeight = img.height;

          const scaleFactor = Math.min(
            canvasWidth / imageWidth,
            canvasHeight / imageHeight
          );

          const origScale = scaleFactor / 1.01;

          img.scale(origScale);

          setScaleCanvas(origScale);
          img.set({
            left: (canvasWidth - img.width * scaleFactor) / 2,
            top: (canvasHeight - img.height * scaleFactor) / 2,
            selectable: false,
          });

          img.on("mousedown", (e) => handleImageClick(e, mode));

          fabricCanvas?.clear();
          fabricCanvas.add(img);
          fabricCanvas.renderAll();

          // Set imageAdded to true to prevent re-adding the image
          setImageAdded(true);
          setOriginalImage(img);
          setImgElement(img);
        });
      };
      reader.readAsDataURL(uploadImage);
    }
  }, [fabricCanvas]);

In short whenever image scales down no what i use it doesnt detect right walls….while it detecs accuralty when i use orignal image and dont scale

Tried ScaleX, scaleY, scale, scaleToWidth, width, height properties still facing same issue