Draw Points With Canvas In Jetpack Compose.

Jayant Kumar🇮🇳
2 min readMay 3, 2024
Photo by Katie McNabb on Unsplash

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

I have already written few articles on canvas.

To draw points, you need two things ,

  • Canvas Composable function
  • drawPoints() function
@Composable
fun DrawPoints() {

Canvas(
modifier = Modifier
.padding(30.dp)
.fillMaxWidth()
.height(300.dp)
) {
val width = size.width
val height = size.height
drawPoints(
points = listOf(
Offset(width / 2, 0f),
Offset(width / 2, height / 2),
Offset(width / 2, height)
),
pointMode = PointMode.Points,
color = Color.Red,
strokeWidth = 50f,
cap = StrokeCap.Round
)
}
}

As you can see above , we called Canvas Composable function and also provide width and height.

First it will take list of point’s positions in points parameter . Also provided the color and strokeWidth.

Cap is the shape of the points , i,e, Rounded.

There are three types of Point Mode -

PointMode.Points

  • we provide the point mode to PointMode.Points , that’s why it draw as a points.

PointMode.Polygon

pointMode = PointMode.Polygon,

Draw the entire sequence of point as one line.

PointMode.Lines

pointMode = PointMode.Lines
  • Draw each sequence of two points as a line segment.
  • If the number of points is odd, then the last point is ignored.

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

--

--

Jayant Kumar🇮🇳

Hello , My name is Jayant, I am a tech youtuber and software Engineer from India 🇮🇳