Hi! i'm having some problems with drawing content ...

# compose

[Pau Marzo]

Hi! i'm having some problems with drawing content modifier and clipping.

fun Modifier.debugBorder(color: Color) = this.drawWithCache {
    val border = 2.dp.toPx()
    
    onDrawWithContent {
        drawContent()
        drawRoundRect(
            topLeft = Offset(-border / 2, -border / 2),
            size = Size(
                width = size.width + border,
                height = size.height + border
            ),
            color = Color.Magenta.copy(alpha = 1f),
            style = Stroke(width = border)
        )

    }
}

if i put this modifier in a text composable inside a M3 button, the drawing will showed clipped due to the shape clipping of the button (which i dont want to touch in any way). Is there any way in which i can draw the rect without having any parent composable clip it? Putting the drawing on top of the parent composable (in a canvas) and then draw from there is not an option because i would have to provide the position of the text in the window and then apply the offset to the canvas, but when theres multiple composables (eg 100) becomes unmaintainable. Thanks!

[Zach Klippenstein (he/him) [MOD]]

If a parent is clipping, afaik there’s no way for a child to escape that clipping.

[Pau Marzo]

I was fearing that..... it seems like a valid usecase though. I guess i'll have to go with canvas and passing size and position via ongloballypositioned...😅

[Zach Klippenstein (he/him) [MOD]]

Drawing outside of clipping bounds would defeat the purpose of clipping

[Zach Klippenstein (he/him) [MOD]]

Why do you want to draw this rectangle outside the button shape?

[Pau Marzo]

Thats the problem, i want the content of the composable to be clipped (in this case the text which is being clipped in the second image as my desired behaviour) but i dont want the modifier drawWithCache (the magenta rectangle) to be clipped (in the second image is being clipped due to the parent button which is the behaviour i dont want). So for the drawing not to be clipped it should be outside the parent composable that is clipping the child right? The purpose of the rectangle not being clipped is for visual aesthetics,

[Zach Klippenstein (he/him) [MOD]]

Yes. You could also just draw the button yourself and then order the drawing and clipping calls however you want. But I think material button uses surface so that might be significantly more work