Learn All Android Canvas Draw Functions
Tags: Mobile App Development, Android, Programming, Android App Development, UX

Geometrical Drawing

Most people use Canvas to draw geometrical items.

1. drawLine

Simply draw one line.

canvas.drawLine(startX, startY, endX, endY, paint)

2. drawLines

If we want to draw more than a line, instead of performing drawLine multiple times, we could use drawLines . We just need to provide a flat float array list of the coordinate values as below.

canvas.drawLines(

floatArrayOf(

startFirstX, startFirstY, endFirstX, endFirstY,

startSecondX, startSecondY, endSecondX, endSecondY),

paint)

3. drawPoint

While you could draw a point by drawing a line with the same start and end coordinates, this is considered a hack. So a drawPoint function is provided.

canvas.drawPoint(coordinateX, coordinateY, paint)

4. drawPoints

As with lines, you can draw multiple points with a flat float coordinate array.

canvas.drawPoints(

floatArrayOf(

startX, startY,

startSecondX, startSecondY),

paint)

5. drawRect

Draw a rectangle using coordinates or a Rect class.

canvas.drawRect(

Rect(startX, topY, endX, bottomY),

paint)

6. drawRoundRect

If you want a rectangle with rounded corners, use drawRoundedRect . It’s similar to drawRect but with the addition of radiusX and radiusY to define the curvature of the rounded corners.

canvas.drawRoundRect(rect, radiusX, radiusY, projectResources.paint)

It draws an evenly rounded corner if radiusX equals radiusY .

When radiusX = radiusY , it will have the usual rounded corners as below:

If radiusX is bigger than radiusY , it will end up similar to below:

If radiusX is smaller than radiusY , it will end up like this:

7. drawCircle

drawCircle is simple. It only requires the center coordinate and the radius.

canvas.drawCircle(

centerCoordinateX, centerCoordinateY,

radius,

paint)

8. drawOval

Unlike drawing a circle, we don’t provide a radius. Instead, we provide a rect , and the oval will be drawn accordingly.

canvas.drawOval(rect, paint)

9. drawArc

Drawing an arc uses the same mechanism as drawing an oval: using a Rect. It has additional parameters, i.e. startAngle , sweepAngle , and useCenter .

canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint)

For the startAngle , count the middle end of the rect as the start, i.e. 90° clockwise. From there, the startAngle is considered 0°. The sweepAngle is then calculated from startAngle . Both use the angle degree ° value.

useCenter is a boolean variable to determine if the arc is connected to the center. The illustrations below depict the difference between useCenter as false and true.

useCenter = false

useCenter = true

10. drawPath

Sometimes, we want to draw something that’s not restricted to normal geometrical lines. We use drawPath here, where Path is an object that contains the paths we want to draw. It consists of functions such as moveTo and lineTo, like a pencil drawing and moving.

Below is an example where we drawPath of a cross mark.

val path = Path()

path.moveTo(startX, topY)

path.lineTo(endX, bottomY)

path.moveTo(startX, bottomY)

path.lineTo(endX, topY) canvas.drawPath(path, paint)

drawPath is a very useful function. Many use it to make drawing app programs in Android. Examples below:

11. drawVertices

This is a relatively complex function, which draws triangles or vertices with the minimal points. For example, with six coordinates, one can draw four triangles:

When repeated, it can be used for complex 3D modeling. The art below (a 3D rose) is drawn with drawVertices .

Here is a detailed explanation of its function.