arc method

The arc method draws an arc centered at a given point with a given radius. This arc will become visible only if you apply the stroke or fill methods. In the first case there will be a stroke, and in the second - a shape.

The last optional parameter controls the drawing direction. It takes the value true or false. The value true draws the arc clockwise, while the value false draws the arc counterclockwise (default).

You can set the start and end angles when drawing. These angles are measured in radians, not degrees. To convert degrees to radians you can use the following function:

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

Syntax

javascriptcontext.arc(x, y, radius, start angle, end angle, [direction = false]);

Example

Let's draw a circumference:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

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

Результат:

Example

Let's draw a half of a circumference:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

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

Результат:

Example

Let's draw a half circle (fill in the outline with fill):

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill();

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

Результат:

See also