How do I draw a semi-transparent shape that "overwrites" other shapes?

[pastelmind]

I want to draw a semi-transparent shape over other shapes such that it "overwrites" them completely, rather than blending. (The problem is better explained in this StackOverflow question)

What I want:

What I don't want:

This can be easily achieved via compositing: draw the same shape twice, using destination-out then source-over as the globalCompositeOperation.

In vanilla JS, this looks like:

ctx.fillStyle = "#0000ff";
ctx.beginPath();
ctx.arc(60, 60, 30, 0, Math.PI * 2);
// First fill() clears the pixels for the shape
ctx.globalCompositeOperation = "destination-out";
ctx.fill();
// Second fill() draws the actual shape
ctx.globalCompositeOperation = "source-over";
ctx.globalAlpha = 0.5;
ctx.fill();

This allows me to avoid calling ctx.arc() or other path drawing methods.

How do I do this in Konva? I'd like to avoid creating two identical shapes, as it would require synchronizing them when one is dragged or clicked. Is it possible with a single shape?

[lavrton]

https://konvajs.org/docs/sandbox/Transparent_Group.html

[pastelmind]

Thank you. From the page you linked:

What if we don’t want to see overlapping areas of transparent shapes?

There is a way to fix such default behavior. You just need to cache the group with group.cache(). Caching the group will convert it into bitmap and draw into external canvas. On the next draw call, Konva will use that resulted canvas to draw whole group with opacity applied to whole image.

It appears caching the group would incur a small performance hit, due to using an intermediate canvas.

There is an alternate method I am using--which is to make the underlying <canvas> of the Layer semi-transparent using CSS opacity. I have not checked whether this is more performant than using a transparent group, but so far it works well.

[lavrton]

For whole layer: layer.getNativeCanvasElement().style.opacity = 0.5. But it will be ignored in export like stage.toDataURL()