#### 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 arc2

The second function, `arc(xPos,yPos,radius,startAngle,endAngle,anticlockwise),` is much easier and is used to develop our new recipe. The parameters here mean the following:

• `xPos`: The x coordinate of the arc's center.

• `yPos`: The y coordinate of the arc's center.

• `radius`: The arc's radius.

• `startAngle`: The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.

• `endAngle`: The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.

• `Anticlockwise` (optional): A Boolean value which, if `True`, causes the arc to be drawn counter-clockwise between the two angles. By default the arc is drawn clockwise.

Two new things are introduced here:

• The `fillStyle` property, which decides the color with which the arc needs to be filled

• The `fill()` method, which actually fills the area of the arc that you draw

The output of this recipe looks like this:

### How to do it...

Here is the recipe:

```<html>
<title>Arcs</title>
<script>
function init()
{
can = document.getElementById("MyCanvasArea");
ctx = can.getContext("2d");

drawArc(60,80,40,180,270,false,"aqua","yellow");
drawArc(120,80,40,270,360,false,"aqua","yellow");
drawArc(220,80,40,180,360,false,"aqua","red");

drawArc(60,150,40,90,180,false,"aqua","yellow");
drawArc(120,150,40,0,90,false,"aqua","yellow");
drawArc(220,150,40,0,180,false,"aqua","red");

drawArc(100,250,40,0,360,false,"aqua","yellow");
drawArc(200,250,40,360,0,false,"aqua","red");

//function to draw curve
{
var startAngle = startAngle * (Math.PI/180);
var endAngle   = endAngle   * (Math.PI/180);

ctx.strokeStyle = lineColor;
ctx.fillStyle   = fillColor;
ctx.lineWidth   = width;

ctx.beginPath();

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

### How it works...

Consider the following diagram for an explanation:

The arc function accepts the angles in radians. Refer to the circle shown previously for a better understanding. If you specify the start angle as zero and end angle as π, then you should see a semicircle drawn in a clockwise direction (starting from zero through π/2 and ending on π). If you are comfortable with angles in degrees then they need to be converted into radians before passing into the function. The formula for conversion is: Value in Radians = value in degrees * (π/180).

A partial chart of conversion is shown as follows:

Angle in degrees

`0`

`0`

`30`

`π/6`

`45`

`π/4`

`60`

`π/3`

`.`

`.`

`.`

`.`

`.`

`.`

### There's more...

Try the following:

• Comment the statements `usesfillStyle` and `fillColor`

• Change the value for `fillStyle`

• Change the angles