0

I am trying to draw a between two lines but arc is not rendering properly. I am using the following code:

imageContext- Canvas's Context

x1- starting point

y1-starting point

multiPointArr- Array which contains points of line(s)

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();
}

Using above code arc is not drawing between lines.

It looks like following:

However starting angle is drawing correct but there is a problem with endAngle. Please let me know how I can resolve this problem.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
MIT
  • 19
  • 1
  • 3
  • 6
  • There is only arc drawing description. I know that how to draw arc but the problem is generating in calculating angles to draw between lines...@Ashish – MIT Oct 21 '13 at 11:20
  • 1
    If your project design permits using a spline (points connected with quadratic curves instead of arcs), @Ken - Abdias Software has posted some nice code on creating a spline curve passing through a given set of points. See his code on this SO question: http://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas/10060462#10060462 – markE Oct 21 '13 at 17:23

0 Answers0