javascript - HTML5キャンバスで2本の線の間に弧を描く方法は?

Question

2 つの線の間に を描画しようとしていますが、円弧が正しくレンダリングされません。次のコードを使用しています。

imageContext - キャンバスのコンテキスト

x1 - 開始点

y1 -開始点

multiPointArr - 線の点を含む配列

imageContext.beginPath();
imageContext.moveTo(x1,y1);
if(multiPointArr.length==2)
    imageContext.lineTo(x2,y2);
if(multiPointArr.length>2){
    for( var ii=1 ; ii < multiPointArr.length ; ii++ ){
     imageContext.lineTo(multiPointArr[ii].x,multiPointArr[ii].y);
    }
}
imageContext.stroke();

if(multiPointArr.length==3)
{
    imageContext.beginPath();
    var xArr=[multiPointArr[0].x,multiPointArr[1].x,multiPointArr[2].x];
    var yArr=[multiPointArr[0].y,multiPointArr[1].y,multiPointArr[2].y];
    var m1 = Math.abs(Math.atan((yArr[1] - yArr[0])/(xArr[1] -xArr[0]))/Math.PI*180.0);
    var m2 = Math.abs(Math.atan((yArr[1] - yArr[2])/(xArr[1] -xArr[2]))/Math.PI*180.0);
    if(xArr[0] >= xArr[1])
    {
            if(yArr[0] >= yArr[1]);
            else m1 = 360 - m1;
    }
    else 
    {
            if(yArr[0] >= yArr[1])m1 = 180 - m1;
            else m1 = 180 + m1;
    }
    if(xArr[2] >= xArr[1])
    {
            if(yArr[2] >= yArr[1]);
            else m2 = 360 - m2;
    }
    else 
    {
            if(yArr[2] >= yArr[1])m2 = 180 - m2; 
            else m2 = 180 + m2;
    }
    var arr=[];
    arr[0] = Math.min(m1, m2);
    arr[1] = Math.abs(m1 - m2);
    arr[2] = arr[1];
    if(arr[1] > 180)
    {
            arr[0] = Math.max(m1,m2);
            arr[1] = 360 - arr[1];
    }
    arr[0]=(arr[0]*Math.PI)/180;
    arr[1]=(arr[1]*Math.PI)/180;
    arr[2]=(arr[2]*Math.PI)/180;
    var ArcLen = 30;
    imageContext.arc((xArr[1]),(yArr[1]),Math.abs(ArcLen*2),arr[0],arr[1],false);
    imageContext.stroke();
}

上記のコード アークを使用すると、行間に描画されません。

次のようになります。

ただし、開始角度は正しく描画されていますが、endAngle に問題があります。この問題を解決する方法を教えてください。