How to attain UI like this with Jetpack Compose?

Question

I've created an Arc with canvas like this:

      Canvas(modifier = Modifier.size(255.dp), onDraw = {
        rotate(300f) {
            drawArc(
                color = primary,
                startAngle = 0f,
                sweepAngle = 180f,
                useCenter = false,
                style = Stroke(width = 8f)
            )
        }
    })

But, that canvas composable draws in a square shape so that I can't make the edges of arc to touch border of the screen.

Answer 1

Use topLeft = Offset(x, y) in the drawArc function with negative values for x and y if necessary to translate it where you need it.