Fill skips x =1 on canvas

derrideanauthor commented 6 years ago

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

binarymax commented 6 years ago

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

derrideanauthor commented 6 years ago

<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

binarymax / floodfill.js

Fill skips x =1 on canvas #19