I have a page where a user can upload a photo. Once uploaded they can move it in a canvas and they can crop the image that is over the canvas.
To crop it, I get the image coordinates relative to the canvas and i convert it with toDataURL.
On mobile devices I use zoom in CSS to scale the whole canvas to fit the viewport. I cannot do it in another way because besides the user's photo, the are other elements and various texts that are impossibile to scale to fit each resolution.
The problem is that when cropping on mobile, the position is not exactly the one the user chose, obviously because of the zoom property.
Here is a fiddle https://jsfiddle.net/g6e16xza/ simulating the mobile problem.
I tried working with ctx.scale() to match the css zoom but without any luck.
In the end I need the result image to be always a fixed dimension (500px × 325px), whether the user is uploading from desktop or mobile.
Any suggestions are greatly appreciated.
Thank you
