#### Overview of this book

With the growing popularity of HTML5 Canvas, this book offers tailored recipes to help you develop portable applications, presentations, and games. The recipes are simple yet creative and build on each other. At every step, the book inspires the reader to develop his/her own recipe. From basic to advanced, every aspect of Canvas API has been covered to guide readers to develop their own application, presentation, or game.
Canvas Cookbook
Credits
www.PacktPub.com
Preface
Free Chapter
Paths and Text
Shapes and Composites
Animation
Images and Videos
Interactivity through Events
Creating Graphs and Charts
3D Modeling
Game Development
Interoperability and Deployment
Index

## 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>
<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
{
ctx.strokeStyle = linecolor;
ctx.fillStyle="red";
ctx.lineWidth   = 8;

ctx.beginPath();
ctx.moveTo(xPos,yPos);
//ctx.fill();
ctx.stroke();
}
}
</script>
<canvas ID="MyCanvasArea" width="300" height="300" style="border:2px solid black;">
</canvas>
</body>
</html>```

### How it works...

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

```ctx.moveTo(xPos,yPos);

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

1. Move to a coordinate `(xPos,yPos)`.

2. Draw an imaginary line between `(xPos,yPos)` and the control point `(xctrl,yctrl)`.

3. Then draw an imaginary line between `(xctrl,yctrl)` and the end coordinate `(xend,yend)`, thereby generating a cone shape.

4. 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.

5. 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)
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`: