Using canvas, we can draw a circle or a circular arc using the

The basic syntax of the arc method is:

x, y are the center point co-ordinates

radius (of the arc)

start_angle Position where the arc should start (in radians)

end_angle Position where the arc should end (in radians)

direction Whether to start tracing in clockwise or anti-clockwise direction. (bool)

true indicates anti-clockwise and false indicates clockwise direction.

So one can modify the start_angle, end_angle and the direction to trace any part of a circle. To draw a quarter circle arc, we need to start at 0 degree and end at 270 degrees but we need to trace in anti-clockwise direction so direction value would be true.

**arc**method of the context object.The basic syntax of the arc method is:

```
context.arc(x, y, radius, start_angle, end_angle, direction)
```

__Parameters:__x, y are the center point co-ordinates

radius (of the arc)

start_angle Position where the arc should start (in radians)

end_angle Position where the arc should end (in radians)

direction Whether to start tracing in clockwise or anti-clockwise direction. (bool)

true indicates anti-clockwise and false indicates clockwise direction.

So one can modify the start_angle, end_angle and the direction to trace any part of a circle. To draw a quarter circle arc, we need to start at 0 degree and end at 270 degrees but we need to trace in anti-clockwise direction so direction value would be true.

__Relationship between radian and degrees:____2 * Pi Radians = 360 degrees__

__Code for a quarter-circle arc:__```
<canvas width="600" height="400"></canvas>
```

<script>

var canvas = document.getElementsByTagName("canvas")[0];

var context = canvas.getContext("2d");

context.beginPath();

context.arc(100, 100, 75, 0, degreesToRadians(270), true);

context.stroke();

function degreesToRadians(degrees) {

return (degrees * Math.PI) / 180;

}

</script>

Click here for a demo.
## No comments:

## Post a Comment