title: Flood Fill after clearRect
body: <p>i have this script for flood fill the HTML5 Canvas:</p>
  
  <pre><code>$("#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 &amp;&amp; lg == g &amp;&amp; lb == b) return false; // match newColor, skip
              if(lr == 0 &amp;&amp; lg == 0 &amp;&amp; lb == 0 &amp;&amp; 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 &gt; 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 &gt; 0){
                  var newPos, pixelPos, x, y, rl, rr;
                  newPos = stack.pop();
                  x = newPos[0];
                  y = newPos[1];
  
                  pixelPos = (y * cwidth + x) * 4;
                  while(y-- &gt;= 0 &amp;&amp; match(pixelPos)){
                      pixelPos -= cwidth * 4;
                  }
                  pixelPos += cwidth * 4;
                  ++y;
                  rr = false;
                  rl = false;
                  while(y++ &lt; cheight - 1 &amp;&amp; match(pixelPos)){
                      colorPixel(pixelPos);
                      pps.push(pixelPos);
                      if(x &gt; 0){
                          if(match(pixelPos - 4)){
                              if(!rl){
                                  stack.push([x - 1, y]);
                                  rl = true;
                              }
                          }else if(rl){
                              rl = false;
                          }
                      }
  
                      if(x &lt; 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 &lt; drawStates.length){
                      drawStates.length = step;
                  }
                  drawStates.push([cvsDraw.toDataURL(), cvsCopy.toDataURL()]);
              }
          }
          scan(x, y);
      });
  </code></pre>
  
  <p>anything is good. then i try to delete some region with clearRect, then i notice when i re-fill the deleted region there is some region that not filled. please see the following image
  <img src="https://i.stack.imgur.com/QnvP7.jpg" alt="After clearRect and then re-fill"></p>
  
  <p>what is causing this?</p>