File Object to ImageData Conversion not producing correct pixels (JavaScript)

Question

I am trying trying to convert an uploaded file object (jpg, png) into an ImageData in JavaScript. This is how I do it so far:

var fileReaderObj = new FileReader();

fileReaderObj.onload = function (ev) {
    var fileDataURL = ev.target.result;
    var img = new Image();    

    img.onload = function(){
        var canvas = document.createElement('canvas');  
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, img.width, img.height);
        var imgData = context.getImageData(0, 0, img.width, img.height);
        console.log("IMGDATA PIXELS:" + imgData.data);
    }

    img.src = fileDataURL;
};

fileReaderObj.readAsDataURL(uploadedFile);

After I do this, I observe my console output to see if imgData.data (which is an array of image pixel values) to see if the pixels are correct. However, after observing the pixels, I've realized that about the first half of the pixels are correct, while the second half pixels are all 0. This is very strange, and I was wondering what I am doing wrong. Any help would be greatly appreciated. Thank you.