floodfill.js
floodfill.js copied to clipboard
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
Hi, Can you please post a code sample and I'll review? Thanks!
<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