I am trying to size a canvas based on an image that I draw into the canvas, but there is a mismatch ...

# compose-desktop

[Yan Pujante]

I am trying to size a canvas based on an image that I draw into the canvas, but there is a mismatch between the size the canvas expect (dp) and the size of the image (pixels). Is there a way to go around this?

@Composable
fun Panel(image: ImageBitmap) {
    Canvas(modifier = Modifier
        .size(image.width.dp, image.height.dp) // doesn't work (mismatch size)
        .border(1.dp, Color.Red)) {
        drawIntoCanvas { canvas ->
            canvas.withSave {
                canvas.drawImage(image, Offset(0f, 0f), Paint())
            }
        }
    }
}

[Kirill Grouchnikov]

What kind of a mismatch?

[Yan Pujante]

dp != pixel

[Kirill Grouchnikov]

You can look at LocalDensity to convert between the two

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

you want toDp() not dp

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

dp means “this value is a dp”, toDp() means “this value is a pixel and I want to convert it to a dp in the current density”

[Yan Pujante]

Using combination of the 2, it now works

val canvasWidth = with(LocalDensity.current) { image.width.toDp() }

Thank you

[Yan Pujante]

toDP() does not work on its own

[Kirill Grouchnikov]

Yes, it needs a proper context

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

Yep, it’s only available when there’s a Density in the receiver

[Yan Pujante]

thank you for the help. this has resolved my problem