Draw an Arc With Canvas In Jetpack Compose.

Photo by SpaceX on Unsplash

In this article we will see how to draw an arc with Canvas in Jetpack Compose.

I have already written few articles on canvas.

• Draw Line With Canvas
• Draw Circle With Canvas
• Draw Rectangle With Canvas

To draw an arc , you need two things ,

• Canvas Composable function
• drawArc() function

@Composable
fun DrawArc() {
    Canvas(modifier = Modifier.fillMaxSize()) {
        val width = size.width
        val height = size.height
        drawArc(
            color = Color.Red,
            topLeft = Offset(width / 2.5f, height / 2),
            startAngle = 0f, // 0 represents 3'0 clock
            sweepAngle = 180f, // size of the arc
            useCenter = false,
            style = Stroke(10f),
            size = Size(300f, 300f)
        )
    }
}

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

Also given the color , topLeft(position to draw arc), stroke and size. Now the main part is startAngle and sweepAngle .

Here we provide startAngle to 0f , which means it will start drawing from 3'0 clock position.

And sweepAngle will be the size of the arc.

When you pass useCenter to true, then it looks like that.

@Composable
fun DrawArc() {
    Canvas(modifier = Modifier.fillMaxSize()) {
        val width = size.width
        val height = size.height
        drawArc(
            color = Color.Red,
            topLeft = Offset(width / 2.5f, height / 2),
            startAngle = 60f, // 0 represents 3'0 clock
            sweepAngle = 180f, // size of the arc
            useCenter = false,
            style = Stroke(10f),
            size = Size(300f, 300f),
        )
    }
}

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