动态生成了多个canvas，每个canvas上绘制的是不同的图片，然后对每个canvas进行相同的操作，得到的结果应该是不同的，但是我算完之后他的每个canvas的结果都是最后一个canvas得到的结果。
怎么做可以得到每一个canvas的结果。

var arrboxG=[];
for (n = 0; n<imgSrc.length; n++){
        var image = new Image();
        imgs[n]=image;
        image.src = imgSrc[n];
        image.onload = function () { //为异步函数,所以将创建canvas放在onload中.
            var oDiv=document.createElement('div'),
                    oCan = document.createElement('canvas'),
                    oP=document.createElement("p");
            oDiv.appendChild(oCan);
            oDiv.appendChild(oP);
            $("#div").append(oDiv);
            var context=oCan.getContext("2d");
            //添加图片
            var imgHeight = this.height;
            var imgWidth = this.width;
            imgWidth=oCan.width;
            imgHeight=oCan.height;
            context.drawImage(this,0,0,imgWidth,imgHeight);
            var imageData =context.getImageData(0, 0,imgWidth,imgHeight);
            var length = imageData.data.length;
            //要对canvas进行的操作
            for (var i = 0; i < length; i++) {
                if (i % 4 === 0) {
                    if (imageData.data[i + 3] == 255) { 
                        var hsl = rgbToHsl(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]);
                        if (hsl[0] >= 57 && hsl[0] <= 152 && hsl[1] >= 13 && hsl[1] <= 100 && hsl[2] >= 0 && hsl [2] <= 90) {
                            arrboxG.push(hsl);
                        }
                       
                    }
                }
            }
        }
  }）