How I Fixed Canvas Click Coordinates in Limn Engine

Description and use

The patch fixes incorrect click coordinates on scaled canvases in Limn Engine by converting client coordinates to canvas coordinates using getBoundingClientRect() and scaling them to the canvas’s internal resolution.

Problem

Buttons on scaled canvases in Limn Engine were unclickable because mouse and touch coordinates were taken from page space instead of canvas space, causing mismatched positions on mobile and resized desktops.

Outcome

After applying the patch, button clicks on the Limn Arcade demo work correctly on phones, tablets, and resized desktop windows, with coordinates matching the canvas’s internal resolution.

Workflow

• 1. Wrap the patch in an IIFE that checks for Display existence.
• 2. Define toCanvasCoords(clientX, clientY) to compute scaleX/Y from canvas.width/height and rect.width/height, then translate client coordinates to canvas space.
• 3. Replace the original mousedown listener with one that calls toCanvasCoords, adds camera offsets, and updates self.x/self.y.
• 4. Add continuous mousemove and touchmove listeners for consistent tracking.
• 5. Deploy the patch by including the script in the Limn Arcade demo or any Limn Engine project.

Evidence

The patch does three things the original didn’t do: scales mouse and touch coordinates, tracks mouse movement continuously, and unifies mouse and touch handling.

Source

toCanvasCoords(clientX, clientY) { var rect = self.canvas.getBoundingClientRect(); var scaleX = self.canvas.width / rect.width; var scaleY = self.canvas.height / rect.height; return {x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY}; }

Source