如何在HTML5画布上的两行之间绘制弧线？

Question

我正在尝试在两条线之间绘制但是弧线无法正确渲染。我使用以下代码：

imageContext - Canvas的上下文

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存在问题。请让我知道如何解决这个问题。