title: .drawimage() is only showing the bottom left corner of an image
body: <p>I am trying to crop an image with Javascript. I have croppr.js and it is sending the data and I was trying to crop the image so I can save it to a storage server with Base 64. I have read online about <code>.drawimage()</code>. I have tried:</p>
  <pre><code>function process(data) {
      console.log(&quot;DATA:&quot; + data)
              var canvas = document.getElementById(&quot;canvas&quot;)
        var context = canvas.getContext('2d');
        var imageObj = new Image();
              var zoom 
            imageObj.onload = function() {
  
                  context.width = data.width
                  context.height = data.height
  
                  // draw cropped image
                  var sourceX = data.x;
                  var sourceY = data.y;
          var sourceWidth = data.width / 2;
          var sourceHeight = data.height / 2; 
          var destWidth = sourceWidth;
          var destHeight = sourceHeight;
          var destX =  0;
          var destY =  0;
          context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
                  var dataurl = canvas.toDataURL('image/jpeg', 1.0)
                  console.log(dataurl)
              };
        imageObj.src = document.getElementsByTagName(&quot;img&quot;)[0].src;
              console.log(imageObj.src)
  }
  </code></pre>
  <p><code>data</code> Contains <code>X</code> <code>Y</code> <code>Height</code> <code>Width</code> As an JSON array.</p>