Skip to content

Clipping Mask Ignores Opacity of Elements

I want to create a grid array of objects. And I want them to clip with the clipping mask. At the same time, all the objects in the grid should have different opacity.

Example in the Sketch.

At line 23, I set a random opacity, but when applying the mask this information will be ignored and filled with the mask color. Is it bug of the PaperJS or I’m doing it wrong?

Image: before/after

Answer

The mask in a masking group should be the first item and not the last. Here is the corrected sketch. This is the corrected line:

var maskedGroup = new Group(innerCircleAsMask, circlesGroup);