在clearRect之后填充洪水

Question

我有这个用于填充HTML5 Canvas的脚本：

$("#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);
    });

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

造成这种情况的原因是什么？