Hi I'm trying to create this background, do you kn...

# compose

[Shalaga44]

Hi I'm trying to create this background, do you know how I create a surface for each part my code:

Surface(modifier = Modifier.fillMaxSize()) {
    Box {
        Canvas(Modifier.fillMaxSize()) {
            val midWidth = size.width / 2
            val midSpace = 200f * density
            val leftPoint = midWidth - (midSpace / 2)
            val rightPoint = midWidth + (midSpace / 2)
            val leftPath = Path().apply {
                moveTo(size.width, 0f)
                lineTo(rightPoint, 0f)
                lineTo(leftPoint, size.height)
                lineTo(size.width, size.height)
                close()
            }
            val rightPath = Path().apply {
                moveTo(0f, 0f)
                lineTo(rightPoint, 0f)
                lineTo(leftPoint, size.height)
                lineTo(0f, size.height)
                close()
            }
            drawPath(leftPath, Color.Red)
            drawPath(rightPath, Color.Black)
        }
        val text = "ABILITY TO"
        Text(
            text = text,
            textAlign = TextAlign.Center,
            modifier = Modifier.align(Alignment.Center),
            style = MaterialTheme.typography.h1,
            fontWeight = FontWeight.Bold,
            color = Color.Black
        )

        Text(
            text = text,
            textAlign = TextAlign.Center,
            modifier = Modifier.align(Alignment.Center),
            style = MaterialTheme.typography.h1,
            fontWeight = FontWeight.Bold,
            color = Color.Red,

        )
    }
}

Slack Conversation

[Albert Chang]

This should work:

Box(modifier = Modifier.fillMaxSize().drawWithCache {
    onDrawWithContent {
        drawRect(Color.Unspecified, blendMode = BlendMode.Clear)
        drawContent()
        val midWidth = size.width / 2
        val midSpace = 200f * density
        val leftPoint = midWidth - (midSpace / 2)
        val rightPoint = midWidth + (midSpace / 2)
        val leftPath = Path().apply {
            moveTo(size.width, 0f)
            lineTo(rightPoint, 0f)
            lineTo(leftPoint, size.height)
            lineTo(size.width, size.height)
            close()
        }
        drawPath(leftPath, Color.Red, blendMode = BlendMode.Xor)
    }
}) {
    Text(
        text = "ABILITY TO",
        textAlign = TextAlign.Center,
        modifier = Modifier.align(Alignment.Center),
        style = MaterialTheme.typography.h1,
        fontWeight = FontWeight.Bold,
        color = Color.Red
    )
}

[Shalaga44]

@Albert Chang ThanQ😍❤️