From 7d923a10d7a69966ba7eb2f6d1aad3e52e589d58 Mon Sep 17 00:00:00 2001 From: HarshitaKatariya Date: Fri, 10 Jan 2025 08:03:52 +0530 Subject: [PATCH] Fix issue #7400 - Issue with mouseX and mouseY when using a CSS border --- .../learningprocessing/chp3/example_3_2.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/test/manual-test-examples/learningprocessing/chp3/example_3_2.js b/test/manual-test-examples/learningprocessing/chp3/example_3_2.js index 86d66ff552..bc9627d301 100644 --- a/test/manual-test-examples/learningprocessing/chp3/example_3_2.js +++ b/test/manual-test-examples/learningprocessing/chp3/example_3_2.js @@ -6,8 +6,13 @@ // Example 3-2: mouseX and mouseY +let offsetX, offsetY; // Declare variables globally + function setup() { createCanvas(200, 200); + const rect = canvas.elt.getBoundingClientRect(); // Get canvas position + offsetX = rect.left + window.scrollX; + offsetY = rect.top + window.scrollY; } function draw() { @@ -19,7 +24,9 @@ function draw() { fill(175); rectMode(CENTER); - // mouseX is a keyword that the sketch replaces with the horizontal position of the mouse. - // mouseY is a keyword that the sketch replaces with the vertical position of the mouse. - rect(mouseX, mouseY, 50, 50); + // Corrected mouseX and mouseY for canvas offset + const correctedMouseX = mouseX - offsetX; + const correctedMouseY = mouseY - offsetY; + + rect(correctedMouseX, correctedMouseY, 50, 50); // Adjust size as needed }