title: Fabric JS getContext('2d') not matching getImageData color
body: <p>Website: <a href="http://minimedit.com/" rel="nofollow noreferrer">http://minimedit.com/</a></p>
  
  <p>Currently implementing an eye dropper. It works fine in my normal resolution of 1080p, but when testing on a higher or lower resolution it doesn't work.</p>
  
  <p>This is the basics of the code:</p>
  
  <pre><code>var ctx = canvas.getContext("2d");
  
  canvas.on('mouse:down', function(e) {
      var newColor = dropColor(e, ctx);
  }
  
  function dropColor(e, ctx) {
      var mouse = canvas.getPointer(e.e),
          x = parseInt(mouse.x),
          y = parseInt(mouse.y),
          px = ctx.getImageData(x, y, 1, 1).data;
          return rgb2hex('rgba('+px+')');
  }
  </code></pre>
  
  <p>When I first initiate the canvas I have it resize to fit resolution:</p>
  
  <pre><code>setResolution(16/9);
  
  function setResolution(ratio) {
      var conWidth = ($(".c-container").css('width')).replace(/\D/g,'');
      var conHeight = ($(".c-container").css('height')).replace(/\D/g,'');
      var tempWidth = 0;
      var tempHeight = 0;
  
      tempHeight = conWidth / ratio;
      tempWidth = conHeight * ratio;
  
      if (tempHeight &gt; conHeight) {
          canvas.setWidth(tempWidth);
          canvas.setHeight(conHeight);
      } else {
          canvas.setWidth(conWidth);
          canvas.setHeight(tempHeight);
      }
  }
  </code></pre>
  
  <p>The x and y mouse coordinates work fine when zoomed in, but they don't line up with the returned image data. It seems as though the ctx isn't changing it's width and height and scaling along with the actual canvas size.</p>
  
  <p>The canvas element is showing the correct width and height before using getContext as well.</p>
  
  <p>Any ideas on a solution?</p>
  
  <p>Feel free to check out the full scripts on the live website at: <a href="http://minimedit.com/" rel="nofollow noreferrer">http://minimedit.com/</a></p>