Javascript 被GlobalComposite操作弄糊涂了

我试图编写一个简单的Sierpinski地毯前几次迭代的演示程序，如下所示：

我想继续的方法是，单击以在每个步骤的较小比例上应用基本图案遮罩。在我看来，通过从一个黑色正方形开始，然后使用“destination in”的GlobalComposite操作和源掩码，就像第二幅图像一样，我应该能够做我想做的事情，但我正在努力将其组合起来

这将绘制背景黑色正方形：

context.globalCompositeOperation = "source-over";
context.fillStyle = 'black';
context.fillRect(0, 0, 500, 500);

然后我期望下面的代码能够产生第一步。但它却变成了一片空白

context.globalCompositeOperation = "destination-in";
var mask = [1, 1, 1, 1, 0, 1, 1, 1, 1];
for (var m = 0; m < 9; ++m)
{
    var x = 10 + m % 3 * 150;
    var y = 10 + Math.floor(m / 3) * 150;
    if (mask[m] > 0)
    {
        context.fillRect(x, y, 150, 150);
    }
}

context.globalCompositeOperation=“目的地在”；
变量掩码=[1,1,1,1,0,1,1,1,1,1]；
对于（var m=0；m<9；++m）
{
var x=10+m%3*150；
变量y=10+数学楼层（m/3）*150；
if（掩码[m]>0）
{
fillRect（x，y，150150）；
}
}

我已把一把小提琴放在一起以显示这个问题

这似乎真的不是一件困难的事情，所以我显然误解了一些重要的事情，如果有任何建议，我将不胜感激

谢谢

---

编辑：当然！我知道为什么会变成空白。第一个fill rect清除除左上角以外的所有内容，下一个清除该内容。我需要使用rect（…），然后一次性填充（）。如果我在一个步骤中重做它来绘制每一个过程，它应该可以做到这一点。

为了完整性，如果其他人落入相同的陷阱，下面是相关的代码。最后，我使用了一个临时（不可见）画布，并用一次填充绘制了整个图层

function drawLevel(k, fill, mask)
{
    tempContext.save();
    tempContext.clearRect(0, 0, canvas.width, canvas.height);

    // current canvas is destination
    tempContext.drawImage(canvas, 0, 0);
    // set global composite
    tempContext.globalCompositeOperation = "destination-in";

    // draw source
    tempContext.beginPath();

    // how many squares each row
    var n = Math.pow(3, k);

    var size = 450 / n / 3;
    for (var i = 0; i < n; ++i)
        for (var j = 0; j < n; ++j)
        {
            for (var m = 0; m < 9; ++m)
            {
                var x = 10 + i * size + m % 3 * size;
                var y = 10 + j * size + Math.floor(m / 3) * size;
                if (mask[m] > 0)
                {
                    tempContext.rect(x, y, size, size);
                }
            }
        }

    tempContext.fillStyle = fill;
    tempContext.fill();
    tempContext.restore();

    // copy drawing from tempCanvas onto visible canvas
    context.drawImage(tempCanvas, 0, 0);
}

函数drawLevel（k、填充、遮罩）
{
tempContext.save（）；
clearRect（0，0，canvas.width，canvas.height）；
//当前画布是目标
drawImage（画布，0,0）；
//集合全局合成
tempContext.globalCompositeOperation=“中的目标”；
//画源
tempContext.beginPath（）；
//每行有多少个正方形
var n=数学功率（3，k）；
变量大小=450/n/3；
对于（变量i=0；i0）
{
rect（x，y，size，size）；
}
}
}
tempContext.fillStyle=填充；
tempContext.fill（）；
tempContext.restore（）；
//将图形从临时画布复制到可见画布上
drawImage（tempCanvas，0,0）；
}