draw 0 to 360º arc using mouse events

[adolfo]

I´m trying to draw an arc using mouse events with paper.js

The user must be able to draw an arc from 0 degree to 360 degree. The issue that I´m facing is that I can draw 270 degree arc but more than 270, the arc flips to another quadrant.

Start point must be located anywhere

A sketch can be found here:

http://sketch.paperjs.org/#V/0.12.7/S/nVTBjpswEP2VEZeQXYcG2l6IOFTpZQ+RVruHHkpVeR1nQSE2MoZNFPHvtbHdeCGtorWEsOf5zTyex5wDhg80SIPnPZWkCFBA+FavOywAC/KbNHSVs5zptcDbsm2yZLlcmQChTFKRMfoGj7xkMvyyXCL1zC3eSCzkCP5qYJeTxJDBsAPLIlqXglQ0POcM1DDpU/tGJmhEpJDY9a6sqjWvuNo3e6kw2c9y1s9XoAvYD/AquNR6NFLwPXVcQbczNAZ/lFtZpBBPgDWuNYe3TLEADKzLAgyV4TJyJjmvIs42vG3ohndaz65lRJachbRTHzeHsyNpT2rPsgGPaj2PjshfnbSNjtLF2WD2wnjlI0lWT6OYvVY0C7skGmYP7EnZilmz6OJRxFXxuIJ0uMq0ueun7+GEgSZZ0bBE9hzNCb7Pa08qEvSgDAodaMNeh3wTJDQC9J5e2+a8BKcIV3WBYzS8kqu1TRfYhqKyFQy8xtgJfkj9gB5H14fREe5tF95ttCTCG1tyjt5zTn85pxGnKZnjXCi9R5eFaq7X4iYZcAcjIQoys2Rhq3xKbhHnMl3kXc30D8n8Q6bdj/J/xMRJjusKb7/xn/974+11t03Um7+Z+ne+CIr3w+1sgvTnr/4P

and this is the implemented code:

var arc_cse;

var radius=200;

var center=new Point(400,400);

var start=new Point(400,500);

var c1 = new Path.Circle({

    center: center,

    radius: 2,

    fillColor: 'black'

}); 

arc_cse = new Path({

        strokeColor: 'red',

        strokeWidth: 1,

        strokeCap: 'round',  

    });    

           

tool.onMouseMove = function(event) {

    var p=new Point(event.point.x,event.point.y);

    var v1=start-center;

    var v2=p-center;

    var angle=(v2.angleInRadians-v1.angleInRadians);

    

    var arcval=arc_CRD(v1.angleInRadians,v2.angleInRadians,angle,center,radius);

    

    arc_cse.remove();

    arc_cse= new Path.Arc(arcval);

}

function arc_CRD(alpha1,alpha2,angle,center,radius){

   

    return {

        from: {

            x: center.x + radius*Math.cos(alpha1),

            y: center.y + radius*Math.sin(alpha1)

        },

        through: {

            x: center.x + radius * Math.cos(alpha1 + (alpha2-alpha1)/2),

            y: center.y + radius * Math.sin(alpha1 + (alpha2-alpha1)/2)

        },

        to: {

            x: center.x + radius*Math.cos(alpha1+(alpha2-alpha1)),

            y: center.y + radius*Math.sin(alpha1+(alpha2-alpha1))

        },

        strokeColor: 'red',

        strokeWidth: 3,

        strokeCap: 'round'

    }

   

}

Thanks in advance