I know that with the method I want to perform, only small shapes can be filled. But I want to fill a small square but still get a stack overflow error.
Why it happens?
Maybe I have problems with functions color() or setcolor()?
function func() {
var canvas = document.getElementById("image");
var context = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
var width = 10;
var height = 10;
var x = 0;
var y = 0;
var imagedata = context.createImageData(width, height);
var pixelindex = (y * width + x) * 4;
function color(x, y) {
let pixelindex = (y * width + x) * 4;
return imagedata.data[pixelindex] + "," +
+imagedata.data[pixelindex + 1] + "," +
+imagedata.data[pixelindex + 2] + "," +
+imagedata.data[pixelindex + 3];
}
function setcolor(x, y, cn) {
let colors = cn.split(",");
let pixelindex = (y * width + x) * 4;
imagedata.data[pixelindex] = colors[0];
imagedata.data[pixelindex + 1] = colors[1];
imagedata.data[pixelindex + 2] = colors[2];
imagedata.data[pixelindex + 3] = colors[3];
}
function fill4(x, y, cb = "27,94,32,255", cn = "67,160,71,255") {
if (color(x, y) !== cb && color(x, y) !== cn) {
setcolor(x, y, cn);
fill4(x, y - 1, cb, cn);
fill4(x, y + 1, cb, cn);
fill4(x - 1, y, cb, cn);
fill4(x + 1, y, cb, cn);
}
}
fill4(5, 5);
context.putImageData(imagedata, x, y);
}<body onload="func();">
<canvas id="image"></canvas>
</body>Based on all the comments under my question, I rewrote the code a bit. Most importantly, I added the conditions that I was told about. Without these conditions, my function ran indefinitely, which is why the error was received. Now, by executing the code, you can see the correct filling of the square with the selected color.
function func() {
var canvas = document.getElementById("image");
var context = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
var width = 100
var x = 0;
var y = 0;
var zX = 50;
var zY = 50;
var cb = [27,94,32,255];
var cn = [67,160,71,255];
context.strokeStyle = "black";
context.lineWidth = 2;
context.strokeRect(x, y, width, width);
if (zX > x && zX < x + width && zY > y && zY < y + width) {
fill4(zY, zY, cb, cn, context);
}
function fill4(zX, zY, cb, cn, content) {
var imagedata = context.createImageData(1, 1);
for (let i = 0; i < 4; i++) {
imagedata.data[i] = cn[i];
}
var color = context.getImageData(zX, zY, 1, 1).data;
if (zX > x && zX < x + width && zY > y && zY < y + width) {
if (color[0] != cn[0] && color[1] != cn[1] && color[2] != cn[2] && color[3] != cn[3]) {
context.putImageData(imagedata, zX, zY);
setTimeout(function() {
fill4(zX, zY-1, cb, cn, context);
fill4(zX, zY+1, cb, cn, context);
fill4(zX-1, zY, cb, cn, context);
fill4(zX+1, zY, cb, cn, context);
}, 20);
}
}
}
}<body onload="func();">
<canvas id="image"></canvas>
</body>