## Draw Arc with arcTo() method HTML5 Canvas

Learn How to Draw arc with arcTo() method on html5 Canvas. To Draw an arc we are able to  use two methods on html5 Canvas. However in this tutorial we are going to learn how to draw HTML5 Canvas Arc with arcTo() method

### The First Method :

```The first method `arc()` has the following structure.```
```There are six arguments which First method Follows1: ` x`the 1st  argument defines the xCoordinates of first point of arc i.e strating point of arc.Its value is given in number as pixel or ratio of canvas width.2:   `y`The second argument `y` describe the yCoordinate of starting point of arc.This value is given in number as pixel or ratio of height of canvas .3:   `radius`:The third argument is radius of circle as width of arc. This value is also given in number and indicates the number of pixels for circle radius.4:   `startAngle:`This arguments indicates the starting point angle with x axis.This value is measured in radians.5:  ` endAngle`This point show the end point angle with x axis.This value is also given in radians.6:  `anticlockwise`This value show that angle is made in anticlockwise direction. This value is given as boolian value. It takes true or false value.the code for drawing arc with arc() method is given.```
context.arc(100,100,20,(Math.PI/180)0,(Math.PI/180) 360,false);
``````
##### second method: arcTo()

The second method arcTo() has following structure.
``` context.arcTo(x1,y1,x2,y2,radius); ```
This method takes five argument.
1:  `x1`
```x1 define xCoordinate of first point,its value is given in number as pixel. 2: y1This defines yCoordinate of first point.3: x2This define xCoordiante of second point.4: y2This define yCoordinate of second point.5: radiusThis define the radius of arc,between two points.context.arcTo() method works only if the current path has at least one path. let's start a line from point (0,0) to pm oint(100,200).From second point we will build our small arc. code for arc will be: context.moveTo(0,0); context.lineTo(100,200); context.arcTo(350,350,100,100,40); ```

``````The code of complete example is given.

<!DOCTYPE html>
<html>
<title>Drawing </title>
<body>
<canvas id ="myCanvas" width ="600" height ="400"
style="border: 1px solid blue;">
</canvas>
<script>
var  canvas = document.getElementById               ("myCanvas");
var context =canvas.getContext('2d');
// set stroke width and style
context.beginPath();
context.strokeStyle ="black";
context.lineWidth =5;
//draw a arc
context.moveTo(0,0);
context.lineTo(100,200);
context.arcTo(350,350,100,100,40);
context.stroke();

</script>
</body>
</html>

``````

=============================================

1

### Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.