I am working on a visualizer to show the area on a graph that is currently being checked for points from a starting points POV, and within a limited FOV. I am trying to show this with canvas arc, however, instead of filling in the arc area, it is filling in the outermost sliver of the arc.
I have tried drawing lines using the rad angle, and those are successful, it is only the arc that does not appear to work correctly. I would expect that it would complete the arc within the two angles, instead of seemingly subtracting the area of the triangle within the arc.
let startingLocation = {x:0,y:0};
let angle = 18.43494882292201;
let fovAngle = 30;
let r = 100;
//Convert start and end angles to radians
let theta = angle * (Math.PI / 180);
let theta2 = (angle + fovAngle) * (Math.PI / 180);
//Draw start to end arc area
ctx.moveTo(startingLocation.x, startingLocation.y);
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(startingLocation.x, startingLocation.y, r, theta, theta2, false);
ctx.fill();
ctx.closePath();