JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="400"></canvas>

JavaScript

function drawArcPart(cx, cy, radius, p1x, p1y, angle, p2x, p2y) {

    var x = p1x - cx;
    var y = p1y - cy;
    
    var startAngle = Math.atan2(y,x);
    var endAngle = startAngle - angle;

    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle='black';
    ctx.beginPath();
    ctx.arc(cx, cy, radius, startAngle, endAngle, true);
    ctx.fill();
    
    
    // draw the points
    
    ctx.strokeStyle='red';
    ctx.beginPath();
    ctx.arc(p1x, p1y, 3, 0, Math.PI*2, true);
    ctx.stroke();
    
    ctx.strokeStyle='green';
    ctx.beginPath();
    ctx.arc(cx, cy, 3, 0, Math.PI*2, true);
    ctx.stroke();
    
    ctx.strokeStyle='blue';
    ctx.beginPath();
    ctx.arc(p2x, p2y, 3, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.stroke();
}

// example 1

var radius = 100 * Math.sqrt(2);
var p1x = 100;
var p1y = 100;

var angle = Math.atan(100,100); // your angle in radians

var cx = 200;
var cy = 200;

var p2x = 100;
var p2y = 300;

drawArcPart(cx, cy, radius, p1x, p1y, angle, p2x, p2y);

// example 2

var shiftLeft = 265;

radius = 145.77;
p1x = 100+shiftLeft;
p1y = 100;

angle = Math.atan(100,100); // your angle in radians

cx = 225+shiftLeft;
cy = 175;

p2x = 150+shiftLeft;
p2y = 300;

drawArcPart(cx, cy, radius, p1x, p1y, angle, p2x, p2y);