canvas - 複数の表示オブジェクトを使用した oCanvas マスキング

Question

私は oCanvas を使用して画像をマスクする三角形を作成しています。各三角形は異なる画像をマスクしています。私が直面している問題は、これらの三角形をマスクすると、その外側にあるものはすべて隠されるため、最後の三角形が下の三角形をマスクすることです。他の場所で透明度を表示しないようにする方法はありますか? 「xor」がglobalCompositeOperationで行うのとは逆のことをしていると思います。

これが私のコードです：

    var canvas = oCanvas.create({
        canvas: "#canvas",
        background: "#0cc"
    });

    var center = canvas.display.ellipse({
        x: canvas.width / 2, y: canvas.height / 2,
        radius: canvas.width / 3,
        fill: "#fff"
    }).add();

    var radius = canvas.width / 3;
    var x = canvas.width / 2;
    var y = canvas.height / 2;

    var image = canvas.display.image({
        x: 0,
        y: 0,
        origin: { x: "center", y: "top" },
        image: img,
        rotation: 120
    });

    center.addChild(image);

    var triangle = canvas.display.polygon({
        x: -canvas.width / 3,
        y: -canvas.width / 6,
        sides: 3,
        radius: 70,
        fill: "#0aa",
        rotation: 30,
        composition:"destination-atop"
    });

    center.addChild(triangle);

    var image1 = canvas.display.image({
        x: 0,
        y: 0,
        origin: { x: "center", y: "top" },
        image: img,
        rotation: 180
    });

    image1.scale(-1, 1);

    center.addChild(image1);

    var triangle1 = canvas.display.polygon({
        x: 0,
        y: -canvas.width / 3,
        sides: 3,
        radius: 70,
        fill: "#aaa",
        rotation: 90,
        composition:"destination-atop"
    });

    center.addChild(triangle1);

コンポジションを使用しない場合はすべての三角形と画像が正しく表示されますが、コンポジションを使用すると、「destination-atop」はやりたいことを実行しますが、三角形の外側にあるものはすべて非表示になります。

お世話になりました！