Fix bug #73

annotationweb/static/annotationweb/annotationweb.js

@@ -37,13 +37,35 @@ function min(a, b) {
 }
 
 function mousePos(e, canvas) {
-    var scale =  g_canvasWidth / $('#canvas').width();
-    var mouseX = (e.pageX - canvas.offsetLeft)*scale;
-    var mouseY = (e.pageY - canvas.offsetTop)*scale;
+    // Get original dimensions of the image
+    const imgWidth = g_canvasWidth;
+    const imgHeight = g_canvasHeight;
+
+    // Get canvas dimension
+    const canvasWidth = $('#canvas').width();
+    const canvasHeight = $('#canvas').height();
+
+    // Calculate the scale ratio of the image once fitted within the canvas
+    const scale = Math.min(canvasWidth / imgWidth, canvasHeight / imgHeight);
+    const scaledWidth = imgWidth * scale;
+    const scaledHeight = imgHeight * scale;
+
+    // Padding on 1 side is half of total difference between image and canvas
+    const paddingX = (canvasWidth - scaledWidth) / 2;
+    const paddingY = (canvasHeight - scaledHeight) / 2;
+
+    // Adjust mouse coordinates
+    let mouseX = (e.offsetX - paddingX) / scale;
+    let mouseY = (e.offsetY - paddingY) / scale;
+
+    // If you click on the canvas but outside the image, reposition on the closest edge of the image
+    mouseX = Math.max(0, Math.min(mouseX, imgWidth - 1));
+    mouseY = Math.max(0, Math.min(mouseY, imgHeight - 1));
+
     return {
         x: mouseX,
-        y: mouseY,
-    }
+        y: mouseY
+    };
 }
 
 function incrementFrame() {

annotationweb/static/annotationweb/style.css

@@ -149,7 +149,9 @@ th, td {
 }
 
 #canvas {
+    height: 85vh;
     width: 100%;
+    object-fit: contain;
 }
 
 #imageFilter form p {