Draw Rectangle With Canvas In Jetpack Compose.

Photo by Michele Feola on Unsplash

In this article we will see how to draw a Rectangle shape with Canvas in Jetpack Compose.

You can check my recent articles on

• Draw Line with Canvas
• Draw Circle with Canvas

To draw a Rectangle shape , you need of two thing only -

• Canvas composable function
• drawRect() function

  Canvas(
        modifier = Modifier
            .padding(horizontal = 10.dp)
            .fillMaxSize()
    ) {
        val width = size.width
        val height = size.height
        drawRect(
            color = Color.Red,
            size = Size(width, 300f),
            topLeft = Offset(0f, 100f))
}

As you can see above , we called Canvas composable function and given the full size to the screen.

• we called drawRect() function , where provide color , size of the rectangle and position where it will drawn.
• topLeft parameter takes Offset(x,y) , if we increase the value x it will move horizontally and if we increase the value of y it will move vertically.

Faded color

use alpha parameter and provide range from 0.1f to 1.0f

drawRect(
            color = Color.Red,
            size =…