Making a transparent button in canvas

[Bayramito]

   <Canvas
              style={{
                width: width,
                height: height,
                position: "absolute",
              }}
              onMagicTap={() => alert("test")}
            >

              <Mask
                mode="luminance"
                mask={
                  <Group>
                    {/* <Fill color="transparent" /> */}
                    <RoundedRect
                      x={20}
                      y={(height - width - 40) / 2}
                      width={CARD_SIZE}
                      height={CARD_SIZE}
                      r={32}
                      color="#dfe4ea"
                    />
                    <RoundedRect
                      x={SMS_BUTTON_X}
                      y={(height - width) / 2}
                      width={BUTTON_WIDTH}
                      height={BUTTON_HEIGHT}
                      r={32}
                      color="black"
                    />
                  </Group>
                }
              >
                {/* <Fill color="transparent" /> */}
                <RoundedRect
                  x={CARD_X}
                  y={(height - width - 40) / 2}
                  width={width - 40}
                  height={width}
                  r={CARD_RADIUS}
                  color="#dfe4ea"
                >
                  <Shadow dx={12} dy={12} blur={25} color="#a5b1c2" />
                  <Shadow dx={-12} dy={-12} blur={25} color="#ffffff" />
                </RoundedRect>
              </Mask>
            </Canvas>

in such case how can i make my masked element interactable ?
Let's say i just want to have transparent button with a blurmask maybe, in this masked place... how can i achieve this ?

Maybe i dont need to use Mask for that..? but i wonder how can i make a transparent or blurred button thing ?

I tryed to put another Canvas inside each other but didnt work.

[wcandillon]

Here you can use PathOps to substract the rounded rect from the main one, to "punch a hole" in the rounded rect. This should be helpful and also be much more performant

[Bayramito]

Would be great if you could explain it with little bit of code actually. Btw my main idea is to put a touchable inside these holes, for now im planing to achieve this by absolute positioning the touchables since we cant nest canvas inside each other. Or if there is another elements that i can give some events to make them interactable idk...

update: i just got answer to my second question about nesting canvas to be able to make them interractable here
#521 (comment)

[wcandillon]

You can construct path with holes in them below is an example done with Figma

[Bayramito]

I think i could not ask the question properly. I got the idea for making hole with a path, but how can i put a touchable to it.

BTW: after you release a new update you also updating the docs right ?

[Albx68]

You can render the touchable outside of the canvas but using styles, you can lay over the canvas @Bayramito