# arc(): Drawing Circles and Arc on Canvas

``gctx.arc(150,100,40,0,1.0*Math.PI);``
x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
r : Radius of Arc or Circle
direction : (optional) Boolean. True for anticlockwise , False ( default ) for clockwise direction of arc
```var my_canvas=\$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.arc(10,100,40,0,0.5*Math.PI);
gctx.stroke();```
Drawing Arc ( All Angles in Radian )
```gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.stroke();```
Drawing Arc ( Input Angles in degree )
```var startAngle=40 // In degree
var endAngle=180 // In degree
var angle1=(1/180) * startAngle; // In Radian
var angle2=(1/180) * endAngle; // In Radian
gctx.arc(100,100,40,angle1*Math.PI,angle2*Math.PI,true);
gctx.stroke();```
Drawing Arc with strokeStyle()
```gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.strokeStyle= 'red';
gctx.stroke();```
Drawing Arc with fillStyle()
```gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();```
Drawing a Circle
```gctx.arc(100,100,40,0,2*Math.PI);
gctx.stroke();```
Drawing Circle with strokeStyle()
```gctx.arc(100,100,40,0,2*Math.PI);
gctx.strokeStyle= 'red';
gctx.stroke();```
Drawing Circle with fillStyle()
```var gctx = my_canvas6.getContext("2d");
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();```
Drawing Circle with fillStyle() & strokeStyle()
```gctx.strokeStyle= 'blue'; // circumference of circle colour
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();```
Drawing Circle with fillStyle() & lineWidth()
```gctx.strokeStyle= 'blue';
gctx.lineWidth=10;
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();```

## Subscribe

* indicates required
Subscribe to plus2net

plus2net.com

More on HTML tags for fonts styles

Post your comments , suggestion , error , requirements etc here .