The following arc method draws an arc centered at some point. It takes the following parameters: x, y, radius r, start angle startAngle, end angle endAngle, draw clockwise or counterclockwise direction.

The direction parameter takes the following values: true makes it draw clockwise, false counterclockwise (the default).

The angles in the arc method are measured in radians, not degrees. You can use the following function to convert degrees into radians:

``````function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}``````

## Let’s draw a circle

``<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>``
```let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.stroke();```

The result of running the code:

## Draw a half circle

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>`
```let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.stroke();```

The result of running the code:

## Drawing half of a circle

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>`
```let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fill(); // paint the path```

Code result:

## How To Make An Incremental Game In Javascript

Table of Contents Hide Why JavaScript?Basics2D FrameworksPixiJSExcaliburJSCreateJSPhaserJS3D FrameworksThreeJSBabylonJS Today you can make a toy in any programming language,…

## What Is += In Javascript, What Does += Mean In Javascript

++ Increment, always adds +1 to a variable. += is a shortened form. Example num will increase by…

## How To Reverse A Number In Javascript

There is a number: var chislo = 123456 How do you flip it – reflect it? Solution Convert…