如何防止混合颜色不透明

Question

我有不透明的矩形。我需要不透明度来显示网格。但是当一个矩形在另一个矩形上方时颜色会混合。
如何解决？就像它是具有更高 z-index 的矩形的白色背景。

结果我想要这个：

我尝试使用

globalCompositeOperation

，但我不知道如何实现我的目标。 代码示例：

import { Stage, Layer, Rect } from "react-konva";

export default function App() {
  return (
    <div className="App">
      <Stage x={0} y={0} width={window.innerHeight} height={window.innerWidth}>
        <Layer>
          <Rect
            x={20}
            y={20}
            width={500}
            height={500}
            fill="green"
            opacity={0.3}
          />
          <Rect
            x={300}
            y={200}
            width={500}
            height={300}
            fill="red"
            opacity={0.3}
          />
        </Layer>
      </Stage>
    </div>
  );
}

https://codesandbox.io/s/dazzling-ardinghelli-bxke99?file=/src/App.jsx:23-622