---
title: 'Android Canvas'' drawArc Method: A Visual Guide'
teaser: A visual aid for the different method parameters in Canvas.drawArc.
tags: android,design
author: Amanda Hill
published_on: 2017-09-27
---

Shalom 👋🏼 and welcome to another installment of, "Things I Cannot Remember But
Can, If Given Enough Time, Create a Cool Visual For Which I Can Then Blog About
And Pretend It Is For the Greater Community But Is Really Just For Me and My
Forgetful Brain."

On today's episode we are going to focus on a particular method in Android's
Canvas class. Specifically the `drawArc` method. There are two `Canvas.drawArc`
method implementations:

```java
public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

public void drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

```

The only difference between the two is that the first one takes a `RectF`
whereas the second one takes all the values (`top`, `left`, `right`, and
`bottom`) necessary to create a `RectF`. So for the sake of "let's not confuse
the reader" I'm just going to focus on the simpler method which takes a `RectF`.

Now let's go through all the parameters:

1. `RectF oval` - According to the docs, this parameter represents "the bounds
  of oval used to define the shape and size of the arc". This is important
  because it helps to remind us that when we are drawing an arc, we are _really_
  drawing a section of an oval.

2. `float startAngle` - Now we are getting into the land of confusion. The docs
  define this parameter as the "starting angle (in degrees) where the arc
  begins". If you're asking yourself, "starting from what!?" then you are a mind
  reader and have accurately guessed exactly what I thought when reading that.
  But before I help answer your woes, let's continue with the other parameters.

3. `float sweepAngle` - Another parameter with the word "angle" in it! Not a
  great start. The docs define this parameter as the "sweep angle (in degrees)
  measured clockwise". At this point if you're like me you're probably wondering
  "what on earth is a sweep angle". But don't worry, all shall soon be revealed.

4. `boolean useCenter` - Now this one, surprisingly, has a super helpful
  description! According to the docs, "if true, include the center of the oval
  in the arc, and close it if it is being stroked. This will draw a wedge."
  Finally! A visual clue for a visual method!

5. `Paint paint` - And lastly, the `Paint` object used to draw our arc.

Okay now that we've covered all of the parameters, let's go back to the two
middle ones with annoyingly similar names - `startAngle` and `sweepAngle`. The
easiest way for me to explain (and for me to understand) these concepts is with
a visual aid! So let's get lookin' 👀

<img
  src="https://images.thoughtbot.com/blog-vellum-image-uploads/BCOj7ParTSipCtBRX2dw_full.png"
  width="400"
/>

Notice how `0` is on the right hand side. Remember the definition of
`startAngle` and how we had no idea from where or whence the arc begins? Well
here's your answer. It begins on the right hand side.

Now for the `sweepAngle`... The `sweepAngle` is the degrees from the
`startAngle` that you want to draw (in a clockwise 🔁 ⏰ motion). Let's go
through some examples together. Let's try and draw the turquoise slice. Our
`startAngle` would be `0` and our `sweepAngle` would be `90`. And for the same
`startAngle` (`0`) if we passed in a `sweepAngle` of `180` we would get the
turquoise and the orange slice. In case English isn't your thang, here's the
code for the above image:

```kotlin
canvas.drawArc(oval, 0F, 90F, true, turquoisePaint)

canvas.drawArc(oval, 90F, 90F, true, orangePaint)

canvas.drawArc(oval, 180F, 90F, true, yellowPaint)

canvas.drawArc(oval, 270F, 90F, true, hotPinkPaint)

```

**_note_** 📝 : In case you're wondering about the white lines between each of
the slices in the above image, please note I made these images in
[Sketch](https://www.sketchapp.com/) so they would be prettier and scale for
this post and that the code I provided above would not have yielded these
dividers.

**_hot tip_** 🔥 : If you want to sweep in the other direction, i.e. from the
`0` to `270` you can just pass a negative value for `sweepAngle` making the
angle move counter clockwise 🔄 ⏰

And in case you're wondering what happens if we make `useCenter` `false` here ya
go:

<img
  src="https://images.thoughtbot.com/blog-vellum-image-uploads/Pi9KDdJKQ1S1RdpbBgpR_fasle.png"
  width="400"
/>

Aaaand that's all she wrote! 'Till next time I forget something and have the
time to draw a visual aid for it 👋🏼

**_shameless_** 🔌 : if you want more "forget me no more because Amanda made a
visual aid" posts, checkout [ImageView ScaleType: A Visual
Guide](https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide)
and [Android Interpolators: A Visual
Guide](https://thoughtbot.com/blog/android-interpolators-a-visual-guide)