floodfill.js icon indicating copy to clipboard operation
floodfill.js copied to clipboard

Fill skips x =1 on canvas

Open derrideanauthor opened this issue 7 years ago • 2 comments

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

derrideanauthor avatar Feb 10 '18 13:02 derrideanauthor

Hi, Can you please post a code sample and I'll review? Thanks!

binarymax avatar Feb 10 '18 20:02 binarymax

<canvas width="32" height="32" id="main"></canvas>
<script type="text/javascript" src="js/floodfill.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('main'),
		ctx = canvas.getContext('2d');

	canvas.style.backgroundColor = "red";

	ctx.imageSmoothingEnabled = false;
	ctx.strokeStyle = "yellow";
	ctx.beginPath();
	ctx.arc(20,20,7,0,2*Math.PI);
	ctx.stroke();
	ctx.fillStyle = "#0000ff";
	ctx.fillFlood(10, 10, 1);
</script>

You might have to zoom to see the red line on the left side of the canvas. I dont understand the algorithm in its entirety, but I managed to fix the problem by just subtracting 1 pixel from the left bound. It doesnt seem to break the function for filling enclosed pixels in other tests.

line 22 : mw = parseInt(i/w2)*w2-1; //left bound

derrideanauthor avatar Feb 11 '18 09:02 derrideanauthor