使用像素操作修改画布在某种程度上不会;我不能完全在IE9中工作

第一次尝试在HTML5画布上进行像素操作时，我编写了一段代码来更改背景图像的特定部分。我正在使用遮罩图像来标记需要更改的特定部分。我画两条垂直线，一次画一个像素。我的代码看起来像：

var backgroundTemp=[0,0,false];
function generateBg(){
    var bgGenCanvas  = document.getElementById("backgroundGenerator");
    var bgGenCtx = bgGenCanvas.getContext("2d");
    var bgMaskCanvas  = document.getElementById("backgroundMask");
    var bgMaskCtx = bgMaskCanvas.getContext("2d");
    if(backgroundTemp[0]==0){
        var img = new Image();
        img.onload=function(){
            bgGenCtx.drawImage(this,0,0);
            backgroundTemp[0]++;
            generateBg();
        }
        backgroundTemp[0]++;
        img.src = 'images/ordnerGreen.png';
    }
    if(backgroundTemp[1]==0){
        var img = new Image();
        img.onload=function(){
            bgMaskCtx.drawImage(this,0,0);
            backgroundTemp[1]++;
            generateBg();
        }
        backgroundTemp[1]++;
        img.src = 'images/ordnerMask.png';
    }
    if(backgroundTemp[0]==2 && backgroundTemp[1]==2 && backgroundTemp[2]==false){
        backgroundTemp[2]=true;
        var newColor=hexToRgb(settings.ordnerColor);
        var genData = bgGenCtx.getImageData(0,0,bgGenCanvas.width,bgGenCanvas.height);
        var maskData = bgMaskCtx.getImageData(0,0,bgMaskCanvas.width,bgMaskCanvas.height);
        var darkenAt1=796*4;
        var darkenAt2=996*4;
        var widthPerLine=bgGenCanvas.width*4;
        for(var i=0;i<maskData.data.length;i+=4){
            var currentLine=Math.ceil(i/widthPerLine);
            var red=maskData.data[i];
            var green=maskData.data[i+1];
            var blue=maskData.data[i+2];
            if(red==255 && green==255 && blue==255){
                red=newColor.r;
                green=newColor.g;
                blue=newColor.b;
                if(darkenAt1==i || darkenAt2==i){
                    red-=Math.floor(red/4);
                    green-=Math.floor(green/4);
                    blue-=Math.floor(blue/4);
                    if(darkenAt1==i){
                        darkenAt1+=parseInt(widthPerLine);
                    }
                    if(darkenAt2==i){
                        darkenAt2+=parseInt(widthPerLine);
                    }
                }
                genData.data[i]=red;
                genData.data[i+1]=green;
                genData.data[i+2]=blue;
            }
        }
        bgGenCtx.putImageData(genData,0,0);
        document.getElementById('viewerBackground').style.backgroundImage="url('"+bgGenCanvas.toDataURL()+"')";
    }
}
$(window).load(function(){generateBg();});

起初，它随机地起作用或不起作用。有时结果是空的，有时是原始图像，有时是修改后的图像。我认为这些图像可能还没有完成加载，所以我添加了一个结构，以确保它们都能加载。这适用于Firefox和Chrome。然而，在IE中，问题仍然存在，每次我按F5时，我都会得到一个随机结果。

有人知道怎么解决这个问题吗？