How to align rectangles in draw with roboflow and jetpack compose?

I'm trying to implement a feature to detect manga bubble speech.

I'm taking a screenshot of my device and receiving the response from the API, and as soon as it returns, I draw some rectangles with canvas. But I can't seem to align these rectangles in any way.

My Code:

@Composable
internal fun ScreenShotDrawSpeech(
    bubbleDomain: BubbleDomain,
    modifier: Modifier = Modifier,
) {
    Canvas(
        modifier = modifier
            .fillMaxSize()
            .background(background_overlay),
        onDraw = {
            bubbleDomain.predictions.forEach { prediction ->
                val left = prediction.x
                val top = prediction.y

                drawRect(
                    color = Color.Red,
                    topLeft = Offset(left.toFloat(), top.toFloat()),
                    size = Size(prediction.width.toFloat(), prediction.height.toFloat()),
                    style = Stroke(width = 2f),
                )
            }
        },
    )
}

Result:

The coordinates of your predictions seem to specify the center of the bubble.

Ue this to determine the left and top of the rectangle instead:

val left = prediction.x - prediction.width / 2
val top = prediction.y - prediction.height / 2