I am going to change the colors of the pixels of a png image(which is in base64 format). This is my source code:

var myImg = new Image();
myImg.src = <...>; //"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABQklEQVR4nO3bC27CMBAFQ";
myImg.onload = function() {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    ctx.drawImage(myImg,0,0);
    var imgd = ctx.getImageData(0, 0, myImg.width, myImg.height);

    for (i = 0; i <imgd.data.length; i += 4) {
        imgd.data[i]   = 255;
        imgd.data[i+1] = 0;
        imgd.data[i+2] = 255;
    }
    ctx.putImageData(imgd, 0, 0);
    $("#Cell").append(myImg);
}

the problem is that when I check the value of imgd.data[i] (before changing the color), it is zero for every i. the original image is shown, but the color does not change. Do you know why?