html5 - Javascript Canvas Blank Image -

i trying make tshirt customizer fabricjs. working fine .. can upload image , load canvas. image placed on tshirt, if want see(or send server) canvas image blank image.

my 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;  

it looks should doing canvas.todataurl inside imgobj.onload.

otherwise image not yet drawn onto fabricjs canvas , canvas empty @ point converting image .todataurl.