oCanvas masking with several display objects

Question

I'm using oCanvas to create triangles that mask images, each triangle masks a different image. The problem I'm facing is that when I mask these triangles they hide whatever is outside it, so the last triangle masks the triangles underneath. Is there any way to avoid displaying transparency elsewhere? I imagine it doing the opposite that "xor" does in globalCompositeOperation.

Here is my code:

    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);

All my triangles and images display correctly if I don't use composition but when I use composition: "destination-atop" does what I want to do but it hides whatever is outside the triangle.

Thank you for all your help!

score 0 · Answer 1 · answered Apr 25 '13 at 07:36

I must first confess that I haven't put in too much effort into composition when I made oCanvas. It is not that well tested, and could probably be done in a better way.

What the composition property does in oCanvas is that it just sets the globalCompositeOperation property in the native canvas API while drawing all the objects (https://github.com/koggdal/ocanvas/blob/develop/src/draw.js#L161).

The effect you are talking about is if I understand it correct for "destination-atop". From https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Compositing, the value means "The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.".

What is the effect that you want? Do you want the image to be kind of as the background for the triangle? Then you can set the fill property to an image: http://ocanvas.org/docs/Display-Objects/Base#property-fill

oCanvas masking with several display objects

1 Answers1