BlendMode does not work as expected with a path and circle in Jetpack Compose

Question

I'm trying to achieve this:

and my progress right now is:

as you can see in the first image the circles are overlapping the path lines. I tried to achieve this with BlendMode.DstOver but it ended up with this:

as you can see path completely disappears with any Dst BlendMode except DstOut but it also does not work as i want.

Here is my code for second picture:

@Composable
fun ForecastQuadrant(
    temperatures: List<Int>,
    modifier: Modifier = Modifier
) {

    Canvas(modifier = Modifier
        .size(400.dp)
        .border(1.dp, Color.Red)) {
        val graphDepth = size.height
        val oneDegree = graphDepth / 6.dp.toPx()
        val oneInterval = size.width / 8f

        var xCursor = oneInterval
        var yCursor = graphDepth - (temperatures.first() * oneDegree)

        val lineStroke = 6f
        val jointRadius = 10f
        val jointStroke = 6f

        val temperaturePath = Path().apply {
            moveTo(0f, yCursor)
            temperatures.drop(1).forEach {
                yCursor = graphDepth - (it * oneDegree)
                lineTo(xCursor, yCursor)
                drawLine(Color.Gray, start = Offset(xCursor, 0f), end = Offset(xCursor, graphDepth))
                drawCircle(
                    color = Color.Black,
                    radius = jointRadius,
                    center = Offset(xCursor, yCursor),
                    style = Stroke(jointStroke),
                )
                moveTo(xCursor  , yCursor)
                xCursor += oneInterval
            }
        }

        drawPath(
            temperaturePath,
            color = Color.Gray,
            style = Stroke(width = lineStroke),
            blendMode = BlendMode.DstOut
        )
    }
}

Can you help me with that ? Thanks in advance.