Paper.js - Clipping opacity for paths outside of area

Question

I have a simple rectangle that forms the clipping area for all shapes added to the canvas, which is working great:

var area = new paper.Rectangle(
    100, 100, 300, 120
);

var path = new paper.Path.Rectangle(area);

group.addChild(path);
group.clipped = true;

What I'm trying to achieve is instead of hiding the paths that fall outside of this area, they are shown with a slight opacity, something like:

Thanks in advance for any help and suggestions.

Answer 1

This is not a simple way as clipped, you might do it by using method intersect. Please try this code.

// SET INITIAL
var area = new paper.Path.Rectangle(100, 100, 300, 220);
area.fillColor = 'yellow'
area.opacity = 0.2
var circle1 = new paper.Path.Circle({
    center:[150, 150],
    radius: 100,
    fillColor: 'red'
})

// OPACITY CLIPPING
var circle2 = circle1.intersect(area)
circle1.opacity = 0.2