title: Canvas flood fill not filling to edge
body: <p>I am using a flood fill algorithm to fill in circles drawn on the canvas. The issue I am having is that the algorithm isn't filling right up to the edge of the circle. </p>
  
  <p>Here is the algorithm based on <a href="http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/" rel="nofollow noreferrer">this blog post</a>:</p>
  
  <pre><code>function paintLocation(startX, startY, r, g, b) {
      var colorLayer = context1.getImageData(0, 0, canvasWidth, canvasHeight);
      pixelPos = (startY * canvasWidth + startX) * 4;
  
      startR = colorLayer.data[pixelPos];
      startG = colorLayer.data[pixelPos + 1];
      startB = colorLayer.data[pixelPos + 2];
  
      var pixelStack = [
          [startX, startY]
      ];
  
      var drawingBoundTop = 0;
      while (pixelStack.length) {
          var newPos, x, y, pixelPos, reachLeft, reachRight;
          newPos = pixelStack.pop();
          x = newPos[0];
          y = newPos[1];
  
          pixelPos = (y * canvasWidth + x) * 4;
          while (y-- &gt;= drawingBoundTop &amp;&amp; matchStartColor(colorLayer, pixelPos, startR, startG, startB)) {
              pixelPos -= canvasWidth * 4;
          }
          pixelPos += canvasWidth * 4;
          ++y;
          reachLeft = false;
          reachRight = false;
          while (y++ &lt; canvasHeight - 1 &amp;&amp; matchStartColor(colorLayer, pixelPos, startR, startG, startB)) {
              colorPixel(colorLayer, pixelPos, r, g, b);
  
              if (x &gt; 0) {
                  if (matchStartColor(colorLayer, pixelPos - 4, startR, startG, startB)) {
                      if (!reachLeft) {
                          pixelStack.push([x - 1, y]);
                          reachLeft = true;
                      }
                  } else if (reachLeft) {
                      reachLeft = false;
                  }
              }
  
              if (x &lt; canvasWidth - 1) {
                  if (matchStartColor(colorLayer, pixelPos + 4, startR, startG, startB)) {
                      if (!reachRight) {
                          pixelStack.push([x + 1, y]);
                          reachRight = true;
                      }
                  } else if (reachRight) {
                      reachRight = false;
                  }
              }
  
              pixelPos += canvasWidth * 4;
          }
      }
      context1.putImageData(colorLayer, 0, 0);
  }
  </code></pre>
  
  <p>Please see the <a href="https://jsfiddle.net/ouftwnc7/" rel="nofollow noreferrer">JSFiddle</a> or the below image to see what I mean. Clicking inside any circles will change the colour between yellow and black (the issue is far more visible with black).</p>
  
  <p>I've read that the issue could be something to do with the anti-aliasing and  I have tried turning it off with <code>context1.imageSmoothingEnabled = true;</code> but it didn't make a difference.</p>
  
  <p><a href="https://i.stack.imgur.com/TeSzI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TeSzI.png" alt="Flood fill issue"></a></p>
  
  <p>I have also tried changing my matchStartColour function as per <a href="https://stackoverflow.com/questions/37679053/canvas-floodfill-leaves-white-pixels-at-edges">this</a> question but that doesn't help.</p>
  
  <pre><code>function matchStartColor(colorLayer, pixelPos, startR, startG, startB) {
      var r = colorLayer.data[pixelPos];
      var g = colorLayer.data[pixelPos + 1];
      var b = colorLayer.data[pixelPos + 2];
  
      return (r == startR &amp;&amp; g == startG &amp;&amp; b == startB);
  }
  </code></pre>
  
  <p>I think it might have something to do with the fact that the circles have no fill colour and the background of the canvas isn't white but it is transparent black. I have tried changing the canvas background to white but that also didn't help.</p>