drawing a speech bubble using canvas in jetcompose

Question

i want to draw a speech bubble using canvas in jetcompose but i dont know how to draw an arrow at bottom end of the Rectangle
this is my code:

@Composable
fun DrawBubble(modifier: Modifier = Modifier) {
Box(modifier = modifier) {
    Canvas(modifier = Modifier.matchParentSize()) {
        val clipPath = Path().apply {
            lineTo(size.width, 0f)
            lineTo(size.width, 30f)
            lineTo(size.width, size.height)
            lineTo(0f, size.height)
            close()
        }
        clipPath(clipPath) {
            drawRoundRect(
                color = Color(0xffff0000),
                size = size,
                cornerRadius = CornerRadius(30f)
            )
        }
    }
}
}

I was thinking of something like this:

but this is my out put:

any help will be appreciated

Answer 1

After several tries I finally draw this:

the code:

@Composable
fun DrawBubble(
modifier: Modifier = Modifier
) {

Box(modifier = modifier) {
    val zero = 0.dp
    val fifty = 50.dp
    Canvas(modifier.matchParentSize().align(Alignment.Center)) {
        val clipPath = Path().apply {
            moveTo(zero.toPx(), fifty.toPx())
            quadraticBezierTo(5.dp.toPx(), 25.dp.toPx(), 40.dp.toPx(), 15.dp.toPx())
            quadraticBezierTo(60.dp.toPx(), 11.dp.toPx(), 80.dp.toPx(), 11.dp.toPx())
            quadraticBezierTo(60.dp.toPx(), 9.dp.toPx(), 140.dp.toPx(), 11.dp.toPx())
            quadraticBezierTo(190.dp.toPx(), 15.dp.toPx(), 200.dp.toPx(), 50.dp.toPx())
            quadraticBezierTo(200.dp.toPx(), 100.dp.toPx(), 100.dp.toPx(), 100.dp.toPx())
            quadraticBezierTo(0.dp.toPx(), 100.dp.toPx(), 0.dp.toPx(), 50.dp.toPx())
            /* lineTo(size.width, 0f)
             lineTo(size.width, 30f)
             lineTo(size.width, size.height)
             lineTo(0f, size.height)*/
            close()
            moveTo(180.dp.toPx(), 85.dp.toPx())

            lineTo(180.dp.toPx(), 90.dp.toPx())

            quadraticBezierTo(180.dp.toPx(), 100.dp.toPx(), 170.dp.toPx(), 125.dp.toPx())
            lineTo(140.dp.toPx(), 90.dp.toPx())
            close()
        }
        clipPath(clipPath) {
            drawPath(
                clipPath,
                color = Orange.copy(alpha = 0.7f),
            )
        }
    }
    Text(
        text = "click here to add task",
        fontSize = 12.sp,
        fontFamily = FontFamily.Monospace,
        fontWeight = FontWeight.Bold,
        modifier = Modifier.align(Alignment.Center).padding(bottom = 15.dp)
    )

}
}