## Drawing arc1

There are two different functions that allow drawing an arc. One of the functions is `arcTo(xctrl,yctrl,xPos,yPos,radius)`

.

You will see the second function in the next recipe. The arcTo() function accepts two coordinates and a radius. To use the `arcTo()`

function work, it is necessary to first mark the position from where the arc is to be drawn. This is done by calling the `moveTo()`

function, the same way as we do for drawing a line (refer to the `lineTo()`

function).

The output of our arc recipe is as follows:

### How to do it...

The recipe is as follows:

<html> <head> <title>Basic Arc</title> <script> function init() { can = document.getElementById("MyCanvasArea"); ctx = can.getContext("2d"); drawArcMethod1(60,150,100,80,140,150,25,"blue"); //function to draw curve by method 1 function drawArcMethod1(xPos,yPos,xctrl,yctrl,xend,yend,radius,linecolor) { ctx.strokeStyle = linecolor; ctx.fillStyle="red"; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(xPos,yPos); ctx.arcTo(xctrl,yctrl,xend,yend,radius); //ctx.fill(); ctx.stroke(); } } </script> </head> <body onload="init()"> <canvas ID="MyCanvasArea" width="300" height="300" style="border:2px solid black;"> your browser doesn't support canvas </canvas> </body> </html>

### How it works...

In our recipe, the syntax to draw the arc is as follows:

ctx.moveTo(xPos,yPos); ctx.arcTo(xctrl,yctrl,xend,yend,radius);

On the canvas, the arc is drawn by following these steps:

Move to a coordinate

`(xPos,yPos)`

.Draw an imaginary line between

`(xPos,yPos)`

and the control point`(xctrl,yctrl)`

.Then draw an imaginary line between

`(xctrl,yctrl)`

and the end coordinate`(xend,yend)`

, thereby generating a cone shape.Draw an imaginary circle with the given radius between the two mentioned lines in such a way that the two lines are tangents to the circle at two different points.

The arc is the path drawn between these two tangent points.

Here is a diagrammatic representation:

The arc as shown previously will appear for the following parameters:

xPos,yPos = (60,150) xctrl,yctrl=(100,80) xend,yend=(140,150) radius=15

If you increase the radius of the circle, the size will increase but it will lie within the angle formed by the two lines intersecting at the control point `(xctrl,yctrl)`

. So the circle will shift downwards, forming two tangent points, and the arc will bend. It will look as follows if the radius is increased to `25`

:

### There's more...

Try the following in the recipe:

Change the color of the arc

Increase the radius

Draw multiple arcs