title: Get click the actual click location in canvas after a css resizing
body: <p>First of all, let's suppose that I have the following canvas: <code>&lt;canvas id="can" width="400" height="200" /&gt;</code>. And Then, I need to resize it with <code>width: 100%; height: auto;</code> to fit my responsive container. And now, let's suppose that my canvas got a width of 800. And the problem is that everytime when I try the get the position(x, y) of a click event, I get the coordinates relative to the actual mouse position.</p>
  
  <p>To be clear, If I click the bottom-edge of the canvas, Insted of getting the position(400, 200), I get (800, 400).</p>
  
  <p>Already searched on the web for a solution but I can't find my specific problem and neither jQuery or vanilla javascript seems to have a easy approach to the problem. The only solution that I thought of was using a kind of a mathematical relation between the actual canvas dimensions setted in the DOM and the width and height of it after the scaling, but I really can't figure how.</p>