title: Javascript Canvas Blank Image
body: <p>I am trying to make a tshirt customizer with FabricJs.
  Everything is working fine .. I can upload the image and load it into canvas.
  The image is placed on the tshirt, but if i want to see(or send to server) the canvas image i get a blank image.</p>
  
  <p>My code is :</p>
  
  <pre><code>document.getElementById('imgLoader').onchange = function handleImage(e) {
          var reader = new FileReader();
  
          reader.onload = function (event) {
  
              var imgObj = new Image();
              imgObj.src = event.target.result;
              //imgObj.crossOrigin = 'anonymous';
  
              $('#imageCanvas').val(event.target.result);
              imgObj.onload = function () {
                  // start fabricJS stuff
                  imgObj.width = 100
                  imgObj.height = 100
  
                  var image = new fabric.Image(imgObj);
                  image.set({
                      top: 100,
                      left: 100 ,
                      padding: 10,
                      cornersize: 10,
                  });
  
                  //image.scale(0.1).setCoords();
                  canvas.add(image);
  
                  // end fabricJS stuff
              }
  
          }
          reader.readAsDataURL(e.target.files[0]);
      }
   });//doc ready
  
  var dataURL = canvas.toDataURL("image/png");
  document.getElementById('canvasImg').src = dataURL; 
  </code></pre>