Update static/js/script.js

static/js/script.js

@@ -23,9 +23,14 @@ function loadImage(src) {
 }
 
 document.getElementById("canvas").addEventListener("click", function (e) {
-    const rect = this.getBoundingClientRect();
-    const x = Math.round(e.clientX - rect.left);
-    const y = Math.round(e.clientY - rect.top);
+    const canvas = this;
+    const rect = canvas.getBoundingClientRect();
+
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+
+    const x = Math.round((e.clientX - rect.left) * scaleX);
+    const y = Math.round((e.clientY - rect.top) * scaleY);
 
     fetch('/click', {
         method: 'POST',
@@ -45,6 +50,7 @@ document.getElementById("canvas").addEventListener("click", function (e) {
         });
 });
 
+
 function updateHSVLabels() {
     document.getElementById('hMinVal').innerText = hsv.hMin;
     document.getElementById('hMaxVal').innerText = hsv.hMax;