Skip to content

Issue with mouseX and mouseY when using a CSS border #7400

Open
@megaMcKaren

Description

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

1.9.4

Web browser and version

130.0.6723.117 (Official Build) (64-bit) (cohort: Stable)

Operating system

Windows 10 Version 180

Steps to reproduce this

Steps:

  1. Make a canvas and in CSS give the canvas a border: canvas { border: 20px darkslategrey groove; }
  2. Go back to js and draw a rect at mouseX/Y: rect(mouseX, mouseY, 5, 5)
  3. The rect is not centered where the mouse. I think it's because the border takes up 20px of the canvas and it worked when I removed the border.

Snippet:

// Paste your code here :)
rect(mouseX, mouseY, 5, 5)

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions