I have just a HTML canvas element which I want to center on screen and fit to screen while maintaining aspect-ratio and not cropping, so black bars will show either horizontally or vertically if the device aspect ratio isn't equal to the canvas aspect ratio.
The CSS property "object-fit: contain" along with "width: 100%; height: 100%; achieves that.
However, now the function getBoundingClientRect() always returns values top: 0, left: 0, even if the canvas has some space vertically or horizontally. I understand that this is because the canvas is actually 100% width and 100% height, and the "object-fit: contain" resizes it afterwards.
I'm making a presentation and I need the canvas centered and fitted to screen, but also need to read the correct coordinates when the user touchs on the canvas, and I can't because of this.
Any solution? Thanks
