From a6a799720f53d52721284c201e2dfc81610c2e40 Mon Sep 17 00:00:00 2001 From: Ben Harris Date: Fri, 25 Nov 2022 18:42:44 +0000 Subject: [PATCH] js: Correct co-ordinate-mapping function for what CSS actually does By default, CSS uses "object-fit: fill", which means that an object is independently scaled in both dimensions to fit its containing box. This is simpler than what I'd assumed (which was "object-fill: contain"). Obviously, the HTML could be changed to use a different object-fit, in which case this code would have to detect it, but for now following the CSS default is more correct than not. --- emccpre.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/emccpre.js b/emccpre.js index 711c3e7..7c15bb0 100644 --- a/emccpre.js +++ b/emccpre.js @@ -173,14 +173,10 @@ function relative_mouse_coords(event, element) { // This depends on the details of how a canvas gets scaled by CSS. function canvas_mouse_coords(event, element) { var rcoords = relative_mouse_coords(event, element); - // Assume that the canvas is as large as possible within its CSS - // box without changing its aspect ratio. - var scale = Math.max(element.width / element.offsetWidth, - element.height / element.offsetHeight); - var xoffset = (element.offsetWidth - element.width / scale) / 2; - var yoffset = (element.offsetHeight - element.height / scale) / 2; - return {x: (rcoords.x - xoffset) * scale, - y: (rcoords.y - yoffset) * scale} + // Assume that the CSS object-fit property is "fill" (the default). + var xscale = element.width / element.offsetWidth; + var yscale = element.height / element.offsetHeight; + return {x: rcoords.x * xscale, y: rcoords.y * yscale} } // Enable and disable items in the CSS menus.