Jetpack Compose Canvas drawPath doesn't work

Issue

I have this composable that is supposed to allow drawing with the pointer to a canvas but when I move the pointer nothing happens

@ExperimentalComposeUiApi
@Composable
fun CanvasDraw() {
    val path = remember { Path() }

    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInteropFilter {
            when (it.action) {
                MotionEvent.ACTION_DOWN -> {
                    path.moveTo(it.x, it.y)
                }
                MotionEvent.ACTION_MOVE -> {
                    path.lineTo(it.x, it.y)
                }
                else -> false
            }
            true
        }) {
        drawPath(
            path = path,
            color = Color.Blue,
            style = Stroke(10f)
        )
    }
}

Solution

remember { Path() } is caching lambda content value for next recompositions, but it cannot trigger recomposition when content on this object is changed. To make some state, which will trigger recomposition on changes in Compose, you need to use a mutable state of some kind - it's a new thing made for Compose.

You can find more info about state in Compose in documentation, including this youtube video which explains the basic principles.

Storing points inside Path will not be clean, as it's not a basic type. Instead I'm using a mutable state list of points, like this:

val points = remember { mutableStateListOf<Offset>() }

Canvas(modifier = Modifier
    .fillMaxSize()
    .pointerInput(Unit) {
        detectDragGestures { change, _ ->
            points.add(change.position)
        }
    }
) {
    drawPath(
        path = Path().apply {
            points.forEachIndexed { i, point ->
                if (i == 0) {
                    moveTo(point.x, point.y)
                } else {
                    lineTo(point.x, point.y)
                }
            }
        },
        color = Color.Blue,
        style = Stroke(10f)
    )
}

Answered By - Philip Dukhov