Why the compose canvas draw things only show at preview function but not display on the running screen

Question

Descript

I want to draw a line at the compose with the compose canvas inside a compose widget,but it's just show at the preview, If just copy the canvas part code,it can Correct display！

The compose code

Card(
        elevation = 6.dp,
        shape = RoundedCornerShape(15.dp),
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 12.dp, vertical = 8.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(color = backgroundColor),
        ) {
            AsyncImage(modifier = Modifier
                .height(180.dp)
                .width(120.dp)
                .padding(12.dp)
             ...  )
              

            Row(
                modifier = Modifier.fillMaxSize()
            ) {

                Column(
                    modifier = Modifier
                        .fillMaxHeight()
                        .weight(0.7f)
                ) {
                   ...
                }

                Canvas(
                    modifier = Modifier
                        .weight(0.3f)
                        .fillMaxHeight()
                        .padding(start = 6.dp)
                ) {
                   // NOT SHOW !!!
                    drawLine(
                        color = Color.White,
                        start = Offset(0f, 0f),
                        end = Offset(0f, size.height),
                        strokeWidth = 2f,
                        pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f),
                    )
                }
            }

        }
    }

SceenShot

Answer 1

It might be an issue related to size of Canvas. Check if it doesn't return width or height zero in your Composable.

In Jetpack Compose Canvas is nothing other than Spacer with Modifier.drawBehind{}

@Composable
fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit) =
    Spacer(modifier.drawBehind(onDraw))

Which you can use Modifier.drawWithContent{} on your own Composable instead using Box and Canvas Composabble

you can use Modifier.drawWithContent for instance such as

Column {
    val drawModifier = Modifier
        .drawWithContent {
            drawContent()
            drawLine(
                color = Color.White,
                start = Offset(size.width*.8f, 0f),
                end = Offset(size.width*.8f, size.height),
                strokeWidth = 2f,
                pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f),
            )
        }
        .width(200.dp)
        .height(100.dp)



    Box(modifier = drawModifier.background(Color.Red)) {
        Text("Hello World")
    }
}