title: Maximum call stack size exceeded when filling a square of only 10 by 10 pixels
body: <p>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.<br />
  Why it happens?<br />
  Maybe I have problems with functions <code>color()</code> or <code>setcolor()</code>?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp;&amp; 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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload="func();"&gt;
    &lt;canvas id="image"&gt;&lt;/canvas&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>