Draw Circle With Canvas In Jetpack Compose.

Photo by Erlend Ekseth on Unsplash

Hello everyone , In this article we will draw a circle through Canvas in Jetpack Compose. I already wrote an article about drawing a line .

To draw a circle you need of two things only —

• Canvas composable function
• drawCircle function

@Composable
fun DrawCircle() {

    Canvas(modifier = Modifier.fillMaxSize()) {
        drawCircle(
            color = Color.Red,
            radius = size.minDimension / 4,
        )
    }
}

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

After that called drawCircle() function which will draw the circle.

• radius will be your size of the circle.

here size.minDimension will find the size of the canvas.

• By default circle will be drawn at the centre of the screen.

If you want somewhere else on the screen then -

 drawCircle(
            color = Color.Red,
            radius = size.minDimension / 4,
            center = Offset(size.width/2,size.height/4)
        )

use the center parameter , and provide the Offset . it takes two parameters.

• x — it will move horizontally , if you increase the value of x
• y — it will move vertically if you increase the value of y.

If you want to provide little faded of Red color then -

drawCircle(
            color = Color.Red,
            radius = size.minDimension / 4,
            center = Offset(size.width / 2, size.height / 4),
            alpha = 0.5f
        )

use alpha parameter , By default value will be 1.0f.

If you don’t want any color , want only border then -

 drawCircle(
            color = Color.Red,
            radius = size.minDimension / 4,
            center = Offset(size.width / 2, size.height / 4),
            alpha = 1f,
            style = Stroke(
                width = 10f
            )
        )

use style parameter and use Stroke , by default DrawStyle.Fill .

Draw a Car with Line and Circle through Canvas

@Composable
fun CarCanvas() {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Canvas(
            modifier = Modifier
                .padding(horizontal = 20.dp)
                .fillMaxWidth()
                .height(400.dp)
        ) {
            val width = size.width
            val height = size.height
            drawLine(
                color = Color.Red,
                start = Offset(x = 0f, y = height / 4),
                end = Offset(x = width / 5, y = height / 4),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = width / 3, y = 0f),
                end = Offset(x = width / 5, y = height / 4),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = width / 3, y = 0f),
                end = Offset(x = width - 300, y = 0f),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = width - 300, y = 0f),
                end = Offset(x = width - 200, y = height / 4),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = width - 200, y = height / 4),
                end = Offset(x = width, y = height / 4),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = width, y = height / 4),
                end = Offset(x = width, y = height / 2),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = width, y = height / 2),
                end = Offset(x = width - 200, y = height / 2),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = 0f, y = height / 4),
                end = Offset(x = 0f, y = height / 2),
                strokeWidth = 5f
            )
            drawArc(
                color = Color.Red,
                startAngle = 180f,
                sweepAngle = 180f,
                useCenter = false,
                topLeft = Offset(x = width / 5, y = height / 2.45f),
                style = Stroke(width = 5f),
                size = Size(200f, 200f)
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = (width / 5) + 200, y = height / 2),
                end = Offset(x = (width / 5) + 380, y = height / 2),
                strokeWidth = 5f
            )
            drawLine(
                color = Color.Red,
                start = Offset(x = 0f, y = height / 2),
                end = Offset(x = width / 5, y = height / 2),
                strokeWidth = 5f
            )
            drawArc(
                color = Color.Red,
                startAngle = 180f,
                sweepAngle = 180f,
                useCenter = false,
                topLeft = Offset(x = width - 400, y = height / 2.45f),
                style = Stroke(width = 5f),
                size = Size(200f, 200f)
            )

            // tires
            drawCircle(
                color = Color.Red,
                radius = 75f,
                center = Offset(x = (width / 5) + 100, y = height / 2)
            )
            drawCircle(
                color = Color.Red,
                radius = 75f,
                center = Offset(x = (width / 5) + 480, y = height / 2)
            )
            // road
            drawLine(
                color = Color.Red,
                start = Offset(x = 0f, y = height / 1.7f),
                end = Offset(x = width, y = height / 1.7f),
                strokeWidth = 5f,
                pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 20f), 25f)
            )
        }
    }

}

That’s all for today’s my friends , Hope you enjoyed and learnt something new from this article.