### Drawing an Arc

Over the weekend, we looked at drawing a curve. We could use this to draw an arc, but there are better ways to do that using the canvas API.

There are two methods you can use to draw an arc, *arc()* and *arcTo()*. See below for the method definitions.

```
context.arc(x, y, radius, startingAngle, endingAngle, counterClockwise);
```

context.arcTo(x1, y1, x2, y2, radius);

The *arc()* method takes the center of our circle as the *x* and *y* parameters, and the radius of the circle. The starting and ending angles are in *radians*. The last parameter is a boolean that tells whether the drawing should be clockwise (false) or counter-clockwise (true). To convert degrees to radians, you can simply multiply the degrees by PI divided by 180.

The *arcTo()* method is a bit different; it draws a line from the current position to x1, y1, and then arcs to x2, y2 with the given radius.

The below draws an arc with a radius of 50, where the starting angle is 20 degrees, and the ending angle is 80 degrees.

```
context.arc(100, 100, 50, 20 * (Math.PI / 180), 80 * (Math.PI / 180), false);
```

## No comments :

Post a Comment