search

binarymax / floodfill.js

HTML5 Canvas Floodfill via JavaScript
MIT License
57 stars 14 forks source link

Strange out-of-bounds bug #10

Open Nekomajin42 opened 7 years ago

Nekomajin42 commented 7 years ago

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.

MacroMan commented 7 years ago

Actually I've been having this issue too.

It seems to happen all the time in my script. I'm making a copy of ms paint in js just for fun, so you can clone and test to see it happening there: https://github.com/MacroMan/MSPaint

binarymax commented 7 years ago

Hi @Nekomajin42 thanks for reporting this issue - but after trying for about 30 minutes I cannot reproduce it. Can you please provide some more information? If you see it again, perhaps take a screenshot and log the parameters in which the bug was triggered? It's hard to believe the bug would be random, because the library is synchronous and deterministic. Thanks!

binarymax commented 7 years ago

@MacroMan your implementation doesn't work since you are always setting the fillcolor alpha to 0 in your mousedown method in bucket.js. Try setting the alpha to 1.0 instead and see if there is still a problem.

Nekomajin42 commented 7 years ago

Hi Max!

Sorry for the late answer. I've updated my repo with the latest code I have: https://nekomajin42.github.io/teknocgrafika/

The interface is hungarian, but you can use some sample code from the demo folder. Just download the .turtle files, and open one using the folder icon on the right side toolbar. You can run the code with the play icon. You can also set the delay between each step with the slider. It makes it easier to see the bug. My problem is always visible using the hatszögek2 demo, and seems to happen randomly with the négyzetek demo.