Nature of issue?

• Found a bug

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: 0.6.1
• Web browser and version: Firefox 62.0b6 (64-bit)
• Operating System: Windows 10
• Steps to reproduce this:

The bug is regarding the winMouseX and winMouseY variables used in the mouseReleased() event. The documentation for the variables says that they store the current horizontal/vertical position of the mouse point relative to the origin point of the window. Now, I'm assuming window in this case means the browser window. If so, I will carry. If not, the variables are probably working as they should.

I was recently experimenting with some pathfinding algorithms and so I needed a playground to run tests on. The playground consisted of a simple grid which was filling up the entire canvas (the width and height of the canvas are always equal to either the width or the height of the browser window depending if the window was in portrait or landscape mode) and right next to the canvas is a select element with some options to set walkable and unwalkable tiles on to the grid and things of that nature.

Before adding the select element, I implemented a simple mouseReleased() event which would just add an unwalkable node to the grid. Nothing special

function mouseReleased() {
  let tileX = Math.floor(map(mouseX, 0, canvasSize, 0, grid.tilesX))
  let tileY = Math.floor(map(mouseY, 0, canvasSize, 0, grid.tilesY))
  if (tileX >= grid.tilesX || tileY >= grid.tilesY) return false
  grid.set(new UnwalkableNode(tileX, tileY)) // Not related to the issue, just creates a black rectangle in the grid
}

But after adding the select element next to the canvas and selecting any one of the options, the tile at position (0, 0) would get changed to an unwalkable node which is indicated by a black rectangle on the canvas. I figured, since I created the select element through p5, it probably has a mouseReleased() event as well and manages the mouseX and mouseY. So I added a simple check to see if the mouse pointer is within the canvas by using winMouseX and winMouseY

function mouseReleased() {
  let canvas = select("#canvas")
  let canvasStyle = canvas.elt.style
  let minX = Pixels.toInt(canvasStyle.left) //Pixels.toInt() convers a string of format 0px to an integer, not significant in the issue
  let minY = Pixels.toInt(canvasStyle.top)
  let maxX = Pixels.toInt(canvasStyle.width)   minX
  let maxY = Pixels.toInt(canvasStyle.height)   minY

  console.log(`Mouse in canvas: ${(winMouseX >= minX && winMouseX <= maxX) && (winMouseY >= minY && winMouseY <= maxY)}`)
  console.log(`WinMouseX: ${winMouseX}, WinMouseY: ${winMouseY}`)
  console.log(`Canvas MinX: ${minX}, Canvas MinY: ${minY}, Canvas MaxX: ${maxX}, Canvas MaxY: ${maxY}`)

  if ((winMouseX >= minX && winMouseX <= maxX) && (winMouseY >= minY && winMouseY <= maxY)) {
    let tileX = Math.floor(map(mouseX, 0, canvasSize, 0, grid.tilesX))
    let tileY = Math.floor(map(mouseY, 0, canvasSize, 0, grid.tilesY))
    if (tileX >= grid.tilesX || tileY >= grid.tilesY) return false
    grid.set(new UnwalkableNode(tileX, tileY))
  }
}

Since I can't paste the entire project here, I will paste the outputs of the 3 console.logs for some of the tested situations.

Clicked inside the canvas on a tile:

Mouse in canvas: true 
WinMouseX: 102, WinMouseY: 94
Canvas MinX: 0, Canvas MinY: 0, Canvas MaxX: 966, Canvas MaxY: 966

Clicked outside the canvas, not on the select element:

Mouse in canvas: false 
WinMouseX: 1234, WinMouseY: 333 
Canvas MinX: 0, Canvas MinY: 0, Canvas MaxX: 966, Canvas MaxY: 966

Clicked on the select element, not on an option:

Mouse in canvas: false 
WinMouseX: 1058, WinMouseY: 19 
Canvas MinX: 0, Canvas MinY: 0, Canvas MaxX: 966, Canvas MaxY: 966

Clicked on an option inside the select element:

Mouse in canvas: true 
WinMouseX: 0, WinMouseY: 0 
Canvas MinX: 0, Canvas MinY: 0, Canvas MaxX: 966, Canvas MaxY: 966

Now as you can see, whenever I click on a option in the select element, the winMouseX and winMouseY variables just reset to 0 even though the pointer is towards the middle of the window.