I wanted to upload the image files, draw them into canvas, make changes and save it in the database. I tried to test the base64 value that the canvas image (Pic) returned, and it is blank. However, I see the result when I append the canvas (Pic) to the document. What am I doing wrong here?

function handleFileSelect(evt) {

  var files = evt.target.files; // FileList object                

  for (var i = 0, f; f = files[i]; i++) {



    if (!f.type.match('image.*')) {

      continue;

    }

    // read contents of files asynchronously

    var reader = new FileReader();



    // Closure to capture the file information.

    reader.onload = (function(theFile) {

      return function(e) {



        var canvas = document.createElement(canvas);



        var datauri = event.target.result,

          ctx = canvas.getContext(2d),

          img = new Image();



        img.onload = function() {



          canvas.width = width;

          canvas.height = height;

          ctx.drawImage(img, 0, 0, width, height);

        };

        img.src = datauri;

        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);



        document.body.appendChild(canvas); //picture gets uploaded                    



        // Generate the image data



        var Pic = canvas.toDataURL(image/png);



        console.log(Pic); // => returns base64 value which when tested equivalent to blank                              

        Pic = Pic.replace(/^data:image/(png|jpg);base64,/, )



        // Sending image to Server

        $.ajax({

          // …

        });



      };

    })(f);

    reader.readAsDataURL(f);

  }

}