title: Drawimage is not drawing the x,y position of the image correctly
body: <p>I'm trying to draw an image onto the canvas using drawimage:</p>
  
  <pre><code>ctx.drawImage(img, 20, 20);
  </code></pre>
  
  <p>However, the image appears to be drawing at a position(20, 40) relative to the top left of the canvas. I want it to be drawn at (20,20).</p>
  
  <p>Here is a JS fiddle that illustrates the problem:
  <a href="https://codepen.io/kapooky/pen/PoYzXeL" rel="nofollow noreferrer">https://codepen.io/kapooky/pen/PoYzXeL</a></p>
  
  <pre><code>var canvas = document.querySelector('canvas');
  var img = document.querySelector('img');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 20, 20);
  //var imgData = ctx.getImageData(0,0,300,300);
  
  function getCursorPosition(event) {
    const rect = canvas.getBoundingClientRect();
    var mouseX = event.clientX - rect.left;
    var mouseY = event.clientY - rect.top;
    // I've included helpful print statements for debugging purposes
    console.log("x: " + mouseX + " y: " + mouseY);
  }
  
  canvas.addEventListener('mousedown', function (e) {
    getCursorPosition(e);
  });
  </code></pre>