Image processing javascript pixels zero

So I am trying to process an image in javascript. I am at the stage where I am getting the pixels of the image, but for some reason half of the image shows up with rgba value of 0 and when I resize the image that changes and becomes more or less. It seams to be a pattern because every 788 pixels I get approximately 310 pixels just with all values 0 can somebody plz help me with this?

// Create the image
var img = new Image();
var a = new Image();
img.src = path
var self = this;

img.onload = function() {
    canvas.ctx.drawImage(img, 0, 0, self.canvas.width, self.canvas.height);
    img.style.display = "none";
    // Get image pixel data
    var pixel = canvas.ctx.getImageData(22, 22, canvas.canvas.height, canvas.canvas.width);
    var data = pixel.data;
    var counter = 0;

    for (var i = 0;i < data.length;i+=4) {
        document.getElementById("color").innerHTML += i+' = rgba(' + data[i] + ',' + data[i+1] +
         ',' + data[i+2] + ',' + data[i+3] + ')<br>';
        counter++;
    };
};