'Maximum call stack size exceeded when filling a square of only 10 by 10 pixels

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>

javascript canvas

Solution 1:^[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	np.

'Maximum call stack size exceeded when filling a square of only 10 by 10 pixels

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]