Paint algorithm leaving white pixels at the edges when I color
<p>I am creating a drawing application. When I select a very dark color and paint inside the Panda's face, the edges are left white. I want my code to color entire area bound within the borders. This is the <a href="http://colorpeutic.com/product.php?id=14" rel="nofollow">LINK</a>. These are the functions that I am using in javascript. How can I make them better?</p>

<pre><code>function matchOutlineColor(r, g, b, a) {

    return (r + g + b &lt; 75 &amp;&amp; a &gt;= 50);
};

function matchStartColor(pixelPos, startR, startG, startB) {
    var r = outlineLayerData.data[pixelPos],
        g = outlineLayerData.data[pixelPos + 1],
        b = outlineLayerData.data[pixelPos + 2],
        a = outlineLayerData.data[pixelPos + 3];

    // If current pixel of the outline image is black
    if (matchOutlineColor(r, g, b, a)) {
        return false;
    }

    r = colorLayerData.data[pixelPos];
    g = colorLayerData.data[pixelPos + 1];
    b = colorLayerData.data[pixelPos + 2];

    // If the current pixel matches the clicked color
    if (r === startR &amp;&amp; g === startG &amp;&amp; b === startB) {
        return true;
    }

    // If current pixel matches the new color
    if (r === curColor.r &amp;&amp; g === curColor.g &amp;&amp; b === curColor.b) {
        return false;
    }

    return true;
};

function colorPixel(pixelPos, r, g, b, a) {
    colorLayerData.data[pixelPos] = r;
    colorLayerData.data[pixelPos + 1] = g;
    colorLayerData.data[pixelPos + 2] = b;
    colorLayerData.data[pixelPos + 3] = a !== undefined ? a : 255;
};

function floodFill(startX, startY, startR, startG, startB) {

    document.getElementById('color-lib-1').style.display = "none";
    document.getElementById('color-lib-2').style.display = "none";
    document.getElementById('color-lib-3').style.display = "none";
    document.getElementById('color-lib-4').style.display = "none";
    document.getElementById('color-lib-5').style.display = "none";

    change = false;

    var newPos,
        x,
        y,
        pixelPos,
        reachLeft,
        reachRight,
        drawingBoundLeft = drawingAreaX,
        drawingBoundTop = drawingAreaY,
        drawingBoundRight = drawingAreaX + drawingAreaWidth - 1,
        drawingBoundBottom = drawingAreaY + drawingAreaHeight - 1,
        pixelStack = [
            [startX, startY]
        ];

    while (pixelStack.length) {

        newPos = pixelStack.pop();
        x = newPos[0];
        y = newPos[1];

        // Get current pixel position
        pixelPos = (y * canvasWidth + x) * 4;

        // Go up as long as the color matches and are inside the canvas
        while (y &gt;= drawingBoundTop &amp;&amp; matchStartColor(pixelPos, startR, startG, startB)) {
            y -= 1;
            pixelPos -= canvasWidth * 4;
        }

        pixelPos += canvasWidth * 4;
        y += 1;
        reachLeft = false;
        reachRight = false;

        // Go down as long as the color matches and in inside the canvas
        while (y &lt;= drawingBoundBottom &amp;&amp; matchStartColor(pixelPos, startR, startG, startB)) {
            y += 1;

            colorPixel(pixelPos, curColor.r, curColor.g, curColor.b);

            if (x &gt; drawingBoundLeft) {
                if (matchStartColor(pixelPos - 4, startR, startG, startB)) {
                    if (!reachLeft) {
                        // Add pixel to stack
                        pixelStack.push([x - 1, y]);
                        reachLeft = true;
                    }

                } else if (reachLeft) {
                    reachLeft = false;
                }
            }

            if (x &lt; drawingBoundRight) {
                if (matchStartColor(pixelPos + 4, startR, startG, startB)) {
                    if (!reachRight) {
                        // Add pixel to stack
                        pixelStack.push([x + 1, y]);
                        reachRight = true;
                    }
                } else if (reachRight) {
                    reachRight = false;
                }
            }

            pixelPos += canvasWidth * 4;
        }
    }
};

// Start painting with paint bucket tool starting from pixel specified by startX and startY
function paintAt(startX, startY) {

    var pixelPos = (startY * canvasWidth + startX) * 4,
        r = colorLayerData.data[pixelPos],
        g = colorLayerData.data[pixelPos + 1],
        b = colorLayerData.data[pixelPos + 2],
        a = colorLayerData.data[pixelPos + 3];

    if (r === curColor.r &amp;&amp; g === curColor.g &amp;&amp; b === curColor.b) {
        // Return because trying to fill with the same color
        return;
    }

    if (matchOutlineColor(r, g, b, a)) {
        // Return because clicked outline
        return;
    }

    floodFill(startX, startY, r, g, b);

    redraw();
};
</code></pre>