绘制函数调用次数过多时的 HTML 画布限制？

如何解决绘制函数调用次数过多时的 HTML 画布限制？

我正在学习一些画布的东西，并且正在用 HTML/JS 制作一个个人项目，所以请原谅我丑陋的代码。
在下面的代码中，当只调用 a/b/c/d 函数之一时，一切正常；但是如果调用了不止一个，那么画布就会开始出现奇怪的 flickering colours。在控制台中找不到错误消息。当我减少要绘制的图块数量而不是画布大小本身时，问题似乎会消退。我确实在代码的其他部分多次调用了画布绘制函数，所以这些函数可能是打破内存限制的稻草还是什么？
帮助将不胜感激！ Screenshot

for (let y = 0; y < yCount; y++) {
    for (let x = 0; x < xCount; x++) {
        if (tileList[y][x] == 1) {
            a(x,y);
            b(x,y);
            c(x,y);
            d(x,y);
        }
    }
}

function a(x,y) {
    if (x != 0 && y != 0) { //! TOP-LEFT
        if (tileList[y][x - 1] != 1 && tileList[y - 1][x] != 1) {
            subfunctionTopLeft(x,y,palette[0]);
        }
    }
}

function b(x,y) {
    if (x != xCount - 1 && y != 0) { //! TOP-RIGHT
        if (tileList[y][x + 1] != 1 && tileList[y - 1][x] != 1) {
            subfunctionTopRight(x,palette[0]);
        }
    }
}
function c(x,y) {
    if (x != 0 && y != yCount - 1) { //! BottOM-LEFT
        if (tileList[y][x - 1] != 1 && tileList[y + 1][x] != 1) {
            subfunctionBottomLeft(x,palette[0]);
        }
    }
}
function d(x,y) {
    if (x != xCount - 1 && y != yCount - 1) { //! BottOM-RIGHT
        if (tileList[y + 1][x] != 1 && tileList[y][x + 1] != 1) {
            subfunctionBottomright(x,palette[0]);
        }
    }
}

（子函数是一些自定义绘制函数。）