在临时画布中编辑图像，然后在主画布中重绘

如何解决在临时画布中编辑图像，然后在主画布中重绘

我正在画布上制作一个基于图块的游戏。我的精灵表由旧的 IBM 字体组成，我希望能够为每个像素的字体和背景着色，但似乎无法找到解决方案。有人告诉我在另一个画布上制作我的图像，即：设置背景和前景，然后将其重绘到当前画布，但我还没有想出如何做到这一点。

在我的代码中绘制一个字符到我使用的屏幕

this.font.drawChar(spriteGroup[z].grid[i][j],drawPosX,drawPosY )

我的 Font 类看起来像这样

class Font{
    constructor(src,tilesizeX,tilesizeY){
        this.fontimage = new Image();
        this.imageBuffer = new Image();
        this.fontimage.src = src;
    }

    drawChar(charCode,posX,posY,color){
        var scopeX = charmap[1][charmap[0].indexOf(charCode)][1] * 8;
        var scopeY = charmap[1][charmap[0].indexOf(charCode)][0] * 16
        game.ctx.globalCompositeOperation = "source-over";
        game.ctx.drawImage(this.fontimage,scopeX,scopeY,7,15,16,32);


    }
}

每个精灵都包含一个名为 colorMap 的二维数组，其中包含我将用来为每个图块引用颜色的代码，但我似乎无法在不引入巨大错误的情况下在画布上实现颜色更改。