Sé que con el método que quiero realizar, solo se pueden rellenar formas pequeñas. Pero quiero llenar un cuadrado pequeño pero aún obtengo un error de desbordamiento de pila.
¿Por qué sucede?
¿Tal vez tengo problemas con las funciones color() o 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>Basado en todos los comentarios bajo mi pregunta, reescribí un poco el código. Lo más importante, agregué las condiciones que me dijeron. Sin estas condiciones, mi función se ejecutó indefinidamente, por lo que se recibió el error. Ahora, al ejecutar el código, puede ver el relleno correcto del cuadrado con el color seleccionado.
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>