How to cut rect from circle in Compose Canvas?

Question

When I use BlendMode.DstOut, it's supposed to show transparent source shape but it's black.

Supposed result:

Real result:

@Composable
fun BlendMode() {
    Box(modifier = Modifier.fillMaxSize().background(White100))
    Canvas(modifier = Modifier.size(300.dp)) {
        val radius = size.width / 3
        drawCircle(
            color = Color.Red,
            radius = radius,
            center = Offset(radius, radius)
        )
        drawRect(
            color = Color.Blue,
            topLeft = Offset(radius, radius),
            size = Size(radius * 2, radius * 2),
            blendMode = BlendMode.DstOut
        )
    }
}

user_3585796 · Answer

The blendMode will not allow you to achieve the desired result. You can do this by using clipRect:

clipRect(
    top = radius,
    left = radius,
    right = radius * 3,
    bottom = radius * 3,
    clipOp = ClipOp.Difference
) {
    drawCircle(
        color = Color.Red,
        radius = radius,
        center = Offset(radius, radius)
    )
}

How to cut rect from circle in Compose Canvas?

1 Answers