[p5.js 2.0 Bug Report]: mouseX/mouseY report CSS-rect coordinates instead of logical canvas coordinates when canvas is CSS-scaled

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.2.2

Web browser and version

Firefox 148.0.2

Operating system

Archlinux

Steps to reproduce this

Steps:

1. Create a p5 WEBGL sketch with createCanvas(600, 400, WEBGL)
2. Wrap it in a container with transform: scale(0.5) applied via CSS
3. Move the mouse across the full canvas width and observe mouseX

Snippet:

// index.html
// <style> #container { transform: scale(0.5); transform-origin: top left; } </style>
// <div id="container"></div>

new p5(async p => {
  let font
  p.setup = async () => {
    p.createCanvas(600, 400, p.WEBGL)
    font = await p.loadFont('https://fonts.gstatic.com/s/notosans/v36/o-0IIpQlx3QUlC5A4PNb4j5Ba_2c7A.ttf')
    p.textFont(font)
    p.textSize(26)
    p.textAlign(p.LEFT)
  }
  p.draw = () => {
    if (!font) return
    p.background(130)
    p.fill(255)
    p.text(`pixelDensity: ${p.pixelDensity()}`, -290, -130)  // 3
    p.text(`rect.width:   ${p.canvas.getBoundingClientRect().width.toFixed(0)}`, -290, -105)  // 300
    p.text(`p.width:      ${p.width}`, -290, -80)   // 600
    p.text(`mouseX:       ${p.mouseX.toFixed(1)}`,  -290, -55)   // caps at ~300 ✗
  }
}, document.getElementById('container'))

Observed: mouseX ranges 0–300 instead of 0–600.
Expected: mouseX should range 0–600 (logical canvas coordinates).

Root cause: mouseX is reported in CSS-rect space (rect.width = 300) rather than logical canvas space (p.width = 600). The ratio rect.width / p.width = 0.5 matches the CSS scale factor exactly. This affects mouse on HiDPI displays and touch on any CSS-scaled canvas.

Start by reproducing the supplied WEBGL createCanvas sketch with the CSS transform and inspect the mouseX/mouseY event-coordinate handling. Compare the coordinates from getBoundingClientRect() with the logical p.width and p.height values. Done means mouse and touch coordinates remain in logical canvas space when the canvas is CSS-scaled, while the existing unscaled behavior still works.