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
, drawing clockwise
or counterclockwise - direction
.
The direction
parameter takes the
following values: true
makes drawing
clockwise, false
- counterclockwise
(by default).
The angles in the arc
method are
measured in radians, not degrees.
To convert degrees to radians you can
use the following function:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Drawing a circumference
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();
:
Drawing a half circumference
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();
:
Drawing a half circle
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // fill a shape
: