binarymax/floodfill.js

HTML5 Canvas Floodfill via JavaScript

floodfill.js's Issues

alpha channel not working for me

I'm trying to transform the background into transparent but it's not working for me:
I've tried context.fillStyle = "rgba(0,0,0,0)"; but it fills the background with a non transparent color.

What should I do?

Strange out-of-bounds bug

Hi Max!

I've been tinkering with your script for a few days, and it seems to be the perfect choice for my app. (It is a turtle graphics app using Blockly.) However, I experience a very strange bug, and it seems to be happening randomly. I hope you might be able to help me.

So, I draw any kind of shape, for example a simple rectangle. The shape is definitely closed. I select a pixel inside the shape, and call the canvasContext.fillFlood() method. Most of the times it works as expected, but sometimes the whole canvas is flooded, including the lines of the shape too. I tried to play with the tolerance parameter, but it happens with various values from 0 to 254.

Do you have any idea what could cause the problem? I don't know how to debug it, because it seems to happen randomly.

maybe can use this code

document.getElementById("canvas_star").getContext("2d").floodFill(65,20,[0x00,0xff,0xaa,0xff]);

ImageData.prototype.getColor=function(x,y){
var i=(x+y_this.width)_4;
var d=this.data;
return [ d[i],d[i+1],d[i+2],d[i+3] ];
}
ImageData.prototype.setColor=function(x,y,c){
var i=(x+y_this.width)_4;
var d=this.data;
d[i]=c[0];
d[i+1]=c[1];
d[i+2]=c[2];
d[i+3]=c[3];
}
ImageData.prototype.equalsAt=function(x,y,c){
var i=(x+y_this.width)_4;
var d=this.data;
return d[i]==c[0] && d[i+1]==c[1] && d[i+2]==c[2] && d[i+3]==c[3];
}
CanvasRenderingContext2D.prototype.floodFill=function(px, py, C) {
var width = this.canvas.width;
var height = this.canvas.height;
var data = this.getImageData(0,0,width,height);
var T = data.getColor(px, py);
if (!data.equalsAt(px,py,C)) {
var node = {x:px,y:py};
var queue = [];
do {
var x = node.x;
var y = node.y;
while(x>0 && data.equalsAt(x-1,y,T)){
x--;
}
var spanUp = false;
var spanDown = false;
while (x < width && data.equalsAt(x,y,T)) {
data.setColor(x, y, C);
if (!spanUp && y > 0 && data.equalsAt(x,y-1,T)) {
queue.push({x:x, y:y-1});
spanUp = true;
} else if (spanUp && y > 0 && data.equalsAt(x,y-1,T)) {
spanUp = false;
}
if (!spanDown && y < height - 1 && data.equalsAt(x,y+1,T)) {
queue.push({x:x, y:y+1});
spanDown = true;
} else if (spanDown && y < (height - 1) && data.equalsAt(x,y+1,T)) {
spanDown = false;
}
x++;
}
} while ((node = queue.shift()) != null);
this.putImageData(data,0,0);
}
}

Using floats causes crash

Using floats for the x or y coordinate causes the browser to hang / crash.

anti-alias not work

Here is my code:

var canvas = document.getElementById("canvas_circle_spec");
var context = canvas.getContext("2d");
context.strokeStyle = "#d90000";
context.save();
context.beginPath();
context.arc(64, 64, 50, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.stroke();
context.closePath();
context.restore();

context.fillStyle = "#d90000";
context.fillFlood(0, 0, 128);
context.fillFlood(64, 64, 128);

Basically, I draw a circle, and fill outside then inside. I assume it should be all red, but there are creepy zigzag along the circle. I got stuck. I guess it's about anti-alias stuff, and I read about the tolerance part, but still not work. Can it be done, and any recommended further reading? Thanks.
Codepen demo here

typeof CanvasRenderingContext2D in iPhone safari is 'object'

Hello, when I try to fillFlood, I get this error:

[Error] TypeError: ctx.fillFlood is not a function. (In 'ctx.fillFlood(offsetX, offsetY, 32)', 'ctx.fillFlood' is undefined)

< CanvasRenderingContext2D {webkitLineDash: [], strokeStyle: "#000000", fillStyle: "#000000", globalAlpha: 1, globalCompositeOperation: "source-over", …}
> typeof CanvasRenderingContext2D
< "object"

if (typeof CanvasRenderingContext2D === 'function') {
	CanvasRenderingContext2D.prototype.fillFlood = fillContext;
};

Tested on iPhone6, iOS 9.3.3

Suggestions to make it more awesome

• Instead of using window.floodfill, attach to context:

        CanvasRenderingContext2D.prototype.floodfill = function(x, y, fillColor) {
            floodfill(x, y, fillColor, this)
        }

• Allow fillcolor to be in other formats other than {r:255,g:0,b:0,a:1}: eg: "rgba(255,0,0,1)", [255,0,0,1], "red" (window.getComputedStyle can convert colors)
• Change the order of the arguments, moving tolerance before width and height.
• Since you can specify the width and height it should also allow you to specify a left and right. This would force the floodfill to be constrained to the given area.

Perfomance Improvements // Profiling

Is there anything we can do to improve the performance of this library, perhaps by parallelizing it?

I really like it, but unfortunately it causes an unresponsive script error in Firefox (seems okay in Chrome) - any advice?

Minified version does not work

Adding ?min=1 to the tests.html shows that it fails

Fill skips x =1 on canvas

Hi!

Im working with a very small canvas 32x32 for a pixel art web app. All works as expected but the big issue is that the algorithm seems to skip the first pixel in every row. Any thoughts on how to fix it?

Thanks in advance

Three dimensional flood fill?

I have a question here on stack:
https://stackoverflow.com/questions/48140264/in-a-mesh-made-of-cubes-with-different-colors-how-do-i-find-the-matching-cluste

I feel like I might be able to use your algorithm to solve for.

Would really appreciate your opinion if you think this implementation would help.

Fill clear?

I tried "fill clearing" with a transparent fill color (r:0,g:0,b:0,a:0) and it freezes Chrome, memory goes sky high and the browser needs to be killed.

But if I set the alpha value to 1 it's fine. Is there any way to keep it at 0?

Infinite loop at high tolerance

I have noticed that when you set tolerance high enough, the application freezes. You can test it in demo, just change tolerance to 255:

floodfill(5, 5, color, canvas.getContext('2d'), star.width, star.height, 255);

flood crosses boundaries

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?

If you select a fill color too close to the color at input coordinates, it freezes

If you select a fill color too close to the color at input coordinates with tolerance above 0, it freezes. Crashing my computer right now. Any way to fix this?

Painting black on white with a tolerance of zero freezes everything

I can't explain why this happens and I don't know how to debug this, as my whole browser just freezes. Super strange, it really only happens with tolerance 0 and white on black. While this script looks unmaintained, I thought it'd be nice to just document it at least :D