超出Javascript递归泛洪填充最大调用堆栈

我目前正在制作一个像素艺术编辑器，我的泛光填充算法似乎已经溢出

fill(x, y, new_color, old_color) {
    var data = this.data_at(x, y);
    if(data == null) { return; }

    var is_old_color = compare_data(data, old_color)
    if(!is_old_color) { return; }

    this.render_ctx.fillStyle = rgba(new_color);
    this.render_ctx.fillRect(x, y, 1, 1);
    this.fill(x, y + 1, new_color, old_color)
    this.fill(x, y - 1, new_color, old_color)
    this.fill(x + 1, y, new_color, old_color)
    this.fill(x - 1, y, new_color, old_color)
}

data_at(x, y) {
    if(state.current_selection.contains_pixel(x, y)) {
        return this.render_ctx.getImageData(x, y, 1, 1).data;
    }
    return null;
}

compare_data（）只检查当前像素的颜色是否与旧的_颜色相同

---

当使用小于110*110像素的画布时，一切正常。任何较大的值都会导致超出最大调用堆栈，并且只填充画布的一部分。

当

x

或

y

超出范围时，处的

data\u似乎不会返回
null
（或
undefined
）。这就是你需要调试的，因为这会触发你的路径离开不递归的函数。我可以保证当x或y超出边界时，data_at返回null。那么，要么A）你错了，它没有，要么B）边界太大，你无论如何都会溢出堆栈。堆栈的大小因浏览器而异，但例如在Chrome（相对较小）上，它看起来不迟于第7800次调用失败：