flood crosses boundaries

[bristol-d]

I have the following image and I'm trying to fill the area around (170, 135).

var canvas = document.getElementById("image");
var dc = canvas.getContext('2d');
var img = new Image();
img.src = "Bristol.png";
img.onload = function() {    
    dc.drawImage(img, 0, 0, canvas.width, canvas.height);
    dc.fillStyle = 'rgb(133, 153, 0)';
    dc.fillFlood(170, 135, 0);
}

The flood escapes the area I'm trying to fill until it looks like this:

Is this a bug?

[MacroMan]

I can also confirm this bug.

It's even worse with other areas of this image, for example, 220 x 135:

However issue does seem to be a duplicate of https://github.com/binarymax/floodfill.js/issues/10

[bristol-d]

Ok, got it I think. In line 26:

for(var j=w;j<e;j+=4) {

change to

for(var j=w+4;j<e;j+=4) {

since e is the first differently coloured pixel to the right of the start, it makes sense to stop the loop before we hit it; similarly w is the first differently coloured pixel we hit to the left of the start so I think we need to begin the loop on the pixel after w.

My colouring of the wards of Bristol works fine with this change applied.

[arpeggiozz]

@bristol-d Great job! I suppose it worth a PR.