Javascript clearRect后的洪水填充

我有一个用于填充HTML5画布的脚本：

$("#crop-canvas-draw").on("click touchstart", function(e){
        if(selectedTool != 'pbucket') return false;

        var pageX = device == 'touch' ? e.originalEvent.touches[0].pageX:e.pageX;
        var pageY = device == 'touch' ? e.originalEvent.touches[0].pageY:e.pageY;
        var x = parseInt(pageX - $("#crop-canvas-primary").offset().left);
        var y = parseInt(pageY - $("#crop-canvas-primary").offset().top);
        var r = 255, g = 0, b = 0;
        var cwidth = cvsDraw.width, cheight = cvsDraw.height;
        var layerData = ctxDraw.getImageData(0, 0, cwidth, cheight);
        var layerDataOri = ctx.getImageData(0, 0, cvs.width, cvs.height);
        var layerDataCopy = ctxCopy.getImageData(0, 0, cvsCopy.width, cvsCopy.height);
        var pps = [];

        var match = function(pp){ // pp = pixelPos
            var lr = layerData.data[pp];
            var lg = layerData.data[pp + 1];
            var lb = layerData.data[pp + 2];
            var ac = layerData.data[pp + 3]; // alpha channnel
            if(lr == r && lg == g && lb == b) return false; // match newColor, skip
            if(lr == 0 && lg == 0 && lb == 0 && ac == 0) return true;
        }

        var colorPixel = function(pp){ // pp = pixelPos
            //pps.push(pp);
            layerData.data[pp] = r;
            layerData.data[pp + 1] = g;
            layerData.data[pp + 2] = b;
            layerData.data[pp + 3] = 150;
        }

        var oriToCopy = function(){
            while(pps.length > 0){
                var pp = pps.pop();
                layerDataCopy.data[pp] = layerDataOri.data[pp];
                layerDataCopy.data[pp + 1] = layerDataOri.data[pp + 1];
                layerDataCopy.data[pp + 2] = layerDataOri.data[pp + 2];
                layerDataCopy.data[pp + 3] = 255;
            }
            ctxCopy.putImageData(layerDataCopy, 0, 0);
        }

        var scan = function(x, y){
            stack = [[x, y]];
            while(stack.length > 0){
                var newPos, pixelPos, x, y, rl, rr;
                newPos = stack.pop();
                x = newPos[0];
                y = newPos[1];

                pixelPos = (y * cwidth + x) * 4;
                while(y-- >= 0 && match(pixelPos)){
                    pixelPos -= cwidth * 4;
                }
                pixelPos += cwidth * 4;
                ++y;
                rr = false;
                rl = false;
                while(y++ < cheight - 1 && match(pixelPos)){
                    colorPixel(pixelPos);
                    pps.push(pixelPos);
                    if(x > 0){
                        if(match(pixelPos - 4)){
                            if(!rl){
                                stack.push([x - 1, y]);
                                rl = true;
                            }
                        }else if(rl){
                            rl = false;
                        }
                    }

                    if(x < cwidth - 1){
                        if(match(pixelPos + 4)){
                            if(!rr){
                                stack.push([x + 1, y]);
                                rr = true;
                            }
                        }else if(rr){
                            rr = false;
                        }
                    }

                    pixelPos += cwidth * 4;
                }
            }
            ctxDraw.putImageData(layerData, 0, 0);
            oriToCopy();
            if(selectedTool == 'pbucket'){
                step++;
                if(step < drawStates.length){
                    drawStates.length = step;
                }
                drawStates.push([cvsDraw.toDataURL(), cvsCopy.toDataURL()]);
            }
        }
        scan(x, y);
    });

$（“#裁剪画布绘制”）。在（“单击touchstart”，函数（e）{
if（selectedTool！=“pbucket”）返回false；
var pageX=设备==“touch”？e.originalEvent.touchs[0]。pageX:e.pageX；
var pageY=device==“touch”？e.originalEvent.touchs[0]。pageY:e.pageY；
var x=parseInt（pageX-$（“#裁剪画布主”）.offset（）.left）；
var y=parseInt（pageY-$（“#裁剪画布主”）.offset（）.top）；
var r=255，g=0，b=0；
var cwidth=cvsDraw.width，cheight=cvsDraw.height；
var layerData=ctxDraw.getImageData（0，0，cwidth，cheight）；
var layerDataOri=ctx.getImageData（0,0，cvs.width，cvs.height）；
var layerDataCopy=ctxCopy.getImageData（0,0，cvscope.width，cvscope.height）；
var-pps=[]；
var match=函数（pp）{//pp=pixelPos
var lr=layerData.data[pp]；
var lg=图层数据[pp+1]；
var lb=图层数据[pp+2]；
var ac=layerData.data[pp+3]；//阿尔法通道
如果（lr==r&&lg==g&&lb==b）返回false；//匹配新颜色，跳过
如果（lr==0&&lg==0&&lb==0&&ac==0）返回true；
}
var colorPixel=函数（pp）{//pp=pixelPos
//pps.push（pp）；
layerData.data[pp]=r；
layerData.data[pp+1]=g；
layerData.data[pp+2]=b；
layerData.data[pp+3]=150；
}
var oriToCopy=函数（）{
而（pps.length>0）{
var pp=pps.pop（）；
layerDataCopy.data[pp]=layerDataOri.data[pp]；
layerDataCopy.data[pp+1]=layerDataOri.data[pp+1]；
layerDataCopy.data[pp+2]=layerDataOri.data[pp+2]；
layerDataCopy.data[pp+3]=255；
}
ctxCopy.putImageData（layerDataCopy，0,0）；
}
变量扫描=函数（x，y）{
堆栈=[[x，y]]；
while（stack.length>0）{
变量newPos、pixelPos、x、y、rl、rr；
newPos=stack.pop（）；
x=newPos[0]；
y=新位置[1]；
像素位置=（y*cwidth+x）*4；
而（y-->=0和匹配（像素点））{
pixelPos-=cwidth*4；
}
pixelPos+=cwidth*4；
++y；
rr=假；
rl=假；
while（y++0）{
如果（匹配（像素位置-4））{
if（！rl）{
堆栈推送（[x-1，y]）；
rl=真；
}
}否则如果（rl）{
rl=假；
}
}
if（x

一切都好。然后我尝试用clearRect删除一些区域，然后我注意到当我重新填充删除的区域时，有一些区域没有填充。请看下图

这是什么原因造成的