chris posted 5 months ago
You may need to take the canvas's offset into account, IE, where is the canvas in relation to the page. If the canvas is not full width and centered using CSS margin and padding, you can get its offset with:
const offsetLeft = document.querySelector('canvas').getBoundingClientRect().left
const offsetTop = document.querySelector('canvas').getBoundingClientRect().top
offsetLeft onto your mouse's x coordinate within your event listener, then
offsetTop onto its y coordinate.
Your balls should scale as expected without any issues in regards to their positioning.