title: Make mouse coordinates relative to <canvas> coordinates
body: <p>I am trying to find where the mouse is on a canvas's 'grid' while maintaining resizability. I currently have the mouse coordinates for where it is on the screen (x and y).</p>
  
  <p>The problem is, the 'scaling' between WebGL (which I am using to draw on the canvas) and the mouse coordinates is different. What WebGL considers to be 10 units to the right from origin is actually considered x number of units from the origin (different screen resolution changes this). This means that when my mouse is over what WebGL considers (10, 10), my mouse coordinates are (100, 100).</p>
  
  <p><strong>How would I convert the mouse coordinates on the screen to the 'WebGL coordinates' which are used to define a point?</strong></p>
  
  <p>This is similar to <a href="https://stackoverflow.com/questions/32868707/transforming-mouse-coordinates-in-canvas-using-fabric-js">this question</a> but I would like to do it without using Fabric.js.</p>