更改图像数组的颜色并使用jQuery或CSS显示它们

我正在编写一个javascript/jquery代码，该代码使用Ajax从服务器端PHP代码接收大量png图像（base64编码，透明背景，黑色前景）。然后，我的Jquery代码应该将前景的颜色（黑色）更改为随机颜色，并在屏幕的随机位置上显示图像。假设图像存储在"images[i]"变量中（作为字符串）（"i"是图像的数量）。我尝试使用画布：

var myImg=[];
for (var i = 0; i < NumberOfImages; i++) {
    myImg[i]=new Image();
    myImg[i].src = images[i];
    var w = myImg[i].width;
    var h = myImg[i].height;
    $(display).append("<canvas id='canvas"+i+"' style='width:"+w+"; height:"+h+"; position: absolute; top: "+i*10+"px; left: "+i*10+"px;'></canvas>");
    cnvs = document.getElementById("canvas"+i);
    ctx = cnvs.getContext("2d");
    (function(i){
                myImg[i].onload = function() {
                ctx.drawImage(myImg[i],0,0, w, h);
        var imgd = ctx.getImageData(0, 0, w, h);
        for (j = 0; j <imgd.data.length; j += 4) {
            imgd.data[j]   = theRandomColorR[i];
                imgd.data[j+1] = theRandomColorG[i];
            imgd.data[j+2] = theRandomColorB[i];
        }
        ctx.putImageData(imgd, 0, 0); 
        myImg[i].src = cnvs.toDataURL();
        images[i]=myImg[i].src
        $(display).append(myImg[i]).css({top: i*10,left: i*100, width:i*10, height:i*10});
            //or:
        $(display).append("<img style='width:100px; height:100px; top:200px; left:200px;' src='"+myImg[i].src+"'></img>");
    }              
})(i);

然而，通过这种方式，我无法控制图像的位置或大小。它们的大小和颜色将是相同的，并且图像将以相同的宽度和/或高度显示。原因可能是使用了"onload"函数，使所有内容都异步。有人知道我可以简单地从Ajax接收图像，将其存储在一个变量中，使用jquery/javascript/CSS更改其颜色，并将其存储到该变量中以备将来使用吗？

谢谢。