Update q5-input.js

[Tezumie]

$._updateMouse more robust calculation for pixel density/ css position

[quinton-ashley]

The current code already accounts for the page's scroll position, canvas position, and canvas pixel density.

It seems you've added support for if the canvas is not the same aspect ratio as it's displayed aspect ratio, which users can't do with any q5 functions. Though it's possible to do that with css, it leads to image stretching which is undesirable in most cases. These calculations would also need to be added for touches too.

It seems like this would be a very a niche issue that can only be caused by custom user code so perhaps it's not something that the library should support, in any other use case these calculations would be unnecessary. Would you agree?

I think for efficiency it's best that q5 only contains code that could be widely used.

[quinton-ashley]

Tezumie explained on Discord that this code is necessary to correct for css letterboxing with "object-fit: contain;", which visually maintains the canvas aspect ratio despite the canvas actually filling its container.

I want to experiment with if it would be better to make adjustments when the window is resized to determine if the canvas should fill available width or height. Then the additional input correction calculations for the mouse and touches wouldn't be necessary.

I also think it would be good to add canvas features from p5play to q5. Aspect ratio mode and fullscreen mode are generally useful for interactive art not just for games.

[quinton-ashley]

Opted for a different way of doing this, displayMode, the code for it is in q5-display.js. The "centered" and "fullscreen" modes apply flex css styling to the canvas' parent element, which doesn't require more complex calculations of the mouse/touches positions that would need to be run every frame for the mouse and every touch.