title: How can I perform flood fill with HTML Canvas?
body: <p>Has anyone implemented a flood fill algorithm in javascript for use with HTML Canvas?</p>
  
  <p>My requirements are simple: flood with a single color starting from a single point, where the boundary color is any color greater than a certain delta of the color at the specified point. </p>
  
  <pre><code>var r1, r2; // red values
  var g1, g2; // green values
  var b1, b2; // blue values
  var actualColorDelta = Math.sqrt((r1 - r2)*(r1 - r2) + (g1 - g2)*(g1 - g2) + (b1 - b2)*(b1 - b2))
  
  function floodFill(canvas, x, y, fillColor, borderColorDelta) {
    ...
  }
  </code></pre>
  
  <p>Update:</p>
  
  <p>I wrote my own implementation of flood fill, which follows. It is slow, but accurate. About 37% of the time is taken up in two low-level array functions that are part of the prototype framework. They are called by push and pop, I presume. Most of the rest of the time is spent in the main loop. </p>
  
  <pre><code>var ImageProcessing;
  
  ImageProcessing = {
  
    /* Convert HTML color (e.g. "#rrggbb" or "#rrggbbaa") to object with properties r, g, b, a. 
     * If no alpha value is given, 255 (0xff) will be assumed.
     */
    toRGB: function (color) {
      var r, g, b, a, html;
      html = color;
  
      // Parse out the RGBA values from the HTML Code
      if (html.substring(0, 1) === "#")
      {
        html = html.substring(1);
      }
  
      if (html.length === 3 || html.length === 4)
      {
        r = html.substring(0, 1);
        r = r + r;
  
        g = html.substring(1, 2);
        g = g + g;
  
        b = html.substring(2, 3);
        b = b + b;
  
        if (html.length === 4) {
          a = html.substring(3, 4);
          a = a + a;
        }
        else {
          a = "ff";
        }
      }
      else if (html.length === 6 || html.length === 8)
      {
        r = html.substring(0, 2);
        g = html.substring(2, 4);
        b = html.substring(4, 6);
        a = html.length === 6 ? "ff" : html.substring(6, 8);
      }
  
      // Convert from Hex (Hexidecimal) to Decimal
      r = parseInt(r, 16);
      g = parseInt(g, 16);
      b = parseInt(b, 16);
      a = parseInt(a, 16);
      return {r: r, g: g, b: b, a: a};
    },
  
    /* Get the color at the given x,y location from the pixels array, assuming the array has a width and height as given.
     * This interprets the 1-D array as a 2-D array.
     *
     * If useColor is defined, its values will be set. This saves on object creation.
     */
    getColor: function (pixels, x, y, width, height, useColor) {
      var redIndex = y * width * 4 + x * 4;
      if (useColor === undefined) {
        useColor = { r: pixels[redIndex], g: pixels[redIndex + 1], b: pixels[redIndex + 2], a: pixels[redIndex + 3] };
      }
      else {
        useColor.r = pixels[redIndex];
        useColor.g = pixels[redIndex + 1]
        useColor.b = pixels[redIndex + 2];
        useColor.a = pixels[redIndex + 3];
      }
      return useColor;
    },
  
    setColor: function (pixels, x, y, width, height, color) {
      var redIndex = y * width * 4 + x * 4;
      pixels[redIndex] = color.r; 
      pixels[redIndex + 1] = color.g, 
      pixels[redIndex + 2] = color.b;
      pixels[redIndex + 3] = color.a;
    },
  
  /*
   * fill: Flood a canvas with the given fill color.
   *
   * Returns a rectangle { x, y, width, height } that defines the maximum extent of the pixels that were changed.
   *
   *    canvas .................... Canvas to modify.
   *    fillColor ................. RGBA Color to fill with.
   *                                This may be a string ("#rrggbbaa") or an object of the form { r: red, g: green, b: blue, a: alpha }.
   *    x, y ...................... Coordinates of seed point to start flooding.
   *    bounds .................... Restrict flooding to this rectangular region of canvas. 
   *                                This object has these attributes: { x, y, width, height }.
   *                                If undefined or null, use the whole of the canvas.
   *    stopFunction .............. Function that decides if a pixel is a boundary that should cause
   *                                flooding to stop. If omitted, any pixel that differs from seedColor
   *                                will cause flooding to stop. seedColor is the color under the seed point (x,y).
   *                                Parameters: stopFunction(fillColor, seedColor, pixelColor).
   *                                Returns true if flooding shoud stop.
   *                                The colors are objects of the form { r: red, g: green, b: blue, a: alpha }
   */
   fill: function (canvas, fillColor, x, y, bounds, stopFunction) {
      // Supply default values if necessary.
      var ctx, minChangedX, minChangedY, maxChangedX, maxChangedY, wasTested, shouldTest, imageData, pixels, currentX, currentY, currentColor, currentIndex, seedColor, tryX, tryY, tryIndex, boundsWidth, boundsHeight, pixelStart, fillRed, fillGreen, fillBlue, fillAlpha;
      if (Object.isString(fillColor)) {
        fillColor = ImageProcessing.toRGB(fillColor);
      }
      x = Math.round(x);
      y = Math.round(y);
      if (bounds === null || bounds === undefined) {
        bounds = { x: 0, y: 0, width: canvas.width, height: canvas.height };
      }
      else {
        bounds = { x: Math.round(bounds.x), y: Math.round(bounds.y), width: Math.round(bounds.y), height: Math.round(bounds.height) };
      }
      if (stopFunction === null || stopFunction === undefined) {
        stopFunction = new function (fillColor, seedColor, pixelColor) {
          return pixelColor.r != seedColor.r || pixelColor.g != seedColor.g || pixelColor.b != seedColor.b || pixelColor.a != seedColor.a;
        }
      }
      minChangedX = maxChangedX = x - bounds.x;
      minChangedY = maxChangedY = y - bounds.y;
      boundsWidth = bounds.width;
      boundsHeight = bounds.height;
  
      // Initialize wasTested to false. As we check each pixel to decide if it should be painted with the new color,
      // we will mark it with a true value at wasTested[row = y][column = x];
      wasTested = new Array(boundsHeight * boundsWidth);
      /*
      $R(0, bounds.height - 1).each(function (row) { 
        var subArray = new Array(bounds.width);
        wasTested[row] = subArray;
      });
      */
  
      // Start with a single point that we know we should test: (x, y). 
      // Convert (x,y) to image data coordinates by subtracting the bounds' origin.
      currentX = x - bounds.x;
      currentY = y - bounds.y;
      currentIndex = currentY * boundsWidth + currentX;
      shouldTest = [ currentIndex ];
  
      ctx = canvas.getContext("2d");
      //imageData = ctx.getImageData(bounds.x, bounds.y, bounds.width, bounds.height);
      imageData = ImageProcessing.getImageData(ctx, bounds.x, bounds.y, bounds.width, bounds.height);
      pixels = imageData.data;
      seedColor = ImageProcessing.getColor(pixels, currentX, currentY, boundsWidth, boundsHeight);
      currentColor = { r: 0, g: 0, b: 0, a: 1 };
      fillRed = fillColor.r;
      fillGreen = fillColor.g;
      fillBlue = fillColor.b;
      fillAlpha = fillColor.a;
      while (shouldTest.length &gt; 0) {
        currentIndex = shouldTest.pop();
        currentX = currentIndex % boundsWidth;
        currentY = (currentIndex - currentX) / boundsWidth;
        if (! wasTested[currentIndex]) {
          wasTested[currentIndex] = true;
          //currentColor = ImageProcessing.getColor(pixels, currentX, currentY, boundsWidth, boundsHeight, currentColor);
          // Inline getColor for performance.
          pixelStart = currentIndex * 4;
          currentColor.r = pixels[pixelStart];
          currentColor.g = pixels[pixelStart + 1]
          currentColor.b = pixels[pixelStart + 2];
          currentColor.a = pixels[pixelStart + 3];
  
          if (! stopFunction(fillColor, seedColor, currentColor)) {
            // Color the pixel with the fill color. 
            //ImageProcessing.setColor(pixels, currentX, currentY, boundsWidth, boundsHeight, fillColor);
            // Inline setColor for performance
            pixels[pixelStart] = fillRed;
            pixels[pixelStart + 1] = fillGreen;
            pixels[pixelStart + 2] = fillBlue;
            pixels[pixelStart + 3] = fillAlpha;
  
            if (minChangedX &lt; currentX) { minChangedX = currentX; }
            else if (maxChangedX &gt; currentX) { maxChangedX = currentX; }
            if (minChangedY &lt; currentY) { minChangedY = currentY; }
            else if (maxChangedY &gt; currentY) { maxChangedY = currentY; }
  
            // Add the adjacent four pixels to the list to be tested, unless they have already been tested.
            tryX = currentX - 1;
            tryY = currentY;
            tryIndex = tryY * boundsWidth + tryX;
            if (tryX &gt;= 0 &amp;&amp; ! wasTested[tryIndex]) {
              shouldTest.push(tryIndex); 
            }
            tryX = currentX;
            tryY = currentY + 1;
            tryIndex = tryY * boundsWidth + tryX;
            if (tryY &lt; boundsHeight &amp;&amp; ! wasTested[tryIndex]) {
              shouldTest.push(tryIndex); 
            }
            tryX = currentX + 1;
            tryY = currentY;
            tryIndex = tryY * boundsWidth + tryX;
            if (tryX &lt; boundsWidth &amp;&amp; ! wasTested[tryIndex]) {
              shouldTest.push(tryIndex); 
            }
            tryX = currentX;
            tryY = currentY - 1;
            tryIndex = tryY * boundsWidth + tryX;
            if (tryY &gt;= 0 &amp;&amp; ! wasTested[tryIndex]) {
              shouldTest.push(tryIndex); 
            }
          }
        }
      }
      //ctx.putImageData(imageData, bounds.x, bounds.y);
      ImageProcessing.putImageData(ctx, imageData, bounds.x, bounds.y);
  
      return { x: minChangedX + bounds.x, y: minChangedY + bounds.y, width: maxChangedX - minChangedX + 1, height: maxChangedY - minChangedY + 1 };
    },
  
    getImageData: function (ctx, x, y, w, h) { 
      return ctx.getImageData(x, y, w, h); 
    },
  
    putImageData: function (ctx, data, x, y) { 
      ctx.putImageData(data, x, y); 
    }
  
  };
  </code></pre>
  
  <p>BTW, when I call this, I use a custom stopFunction:</p>
  
  <pre><code>  stopFill : function (fillColor, seedColor, pixelColor) {
      // Ignore alpha difference for now.
      return Math.abs(pixelColor.r - seedColor.r) &gt; this.colorTolerance || Math.abs(pixelColor.g - seedColor.g) &gt; this.colorTolerance || Math.abs(pixelColor.b - seedColor.b) &gt; this.colorTolerance;
    },
  </code></pre>
  
  <p>If anyone can see a way to improve performance of this code, I would appreciate it. The basic idea is:
    1) Seed color is the initial color at the point to start flooding.
    2) Try four adjacent points: up, right, down and left one pixel.
    3) If point is out of range or has been visited already, skip it.
    4) Otherwise push point onto to the stack of interesting points.
    5) Pop the next interesting point off the stack.
    6) If the color at that point is a stop color (as defined in the stopFunction) then stop processing that point and skip to step 5.
    7) Otherwise, skip to step 2.
    8) When there are no more interesting points to visit, stop looping.</p>
  
  <p>Remembering that a point has been visited requires an array with the same number of elements as there are pixels.</p>