How To Draw Angle In Between Two Lines In Javascript

i have four divs that is p1,p2,p3,p4. it is draggable. at any point i click 'draw' button iwant to draw angle sign like below $(document).ready(function(){ var c=document.getE

Solution 1:

Here's how to illustrate the angle between line segments

Demo: http://jsfiddle.net/m1erickson/XnL3B/

Step#1: Calculate the angles

You can calculate the angle between 2 lines connected at a vertex using Math.atan2:

// calculate the angles in radians using Math.atan2var dx1=pt1.x-pt2.x;
var dy1=pt1.y-pt2.y;
var dx2=pt3.x-pt2.x;
var dy2=pt3.y-pt2.y;
var a1=Math.atan2(dy1,dx1);
var a2=Math.atan2(dy2,dx2);

Step#2: Draw the angle's wedge

You can draw the wedge illustrating the angle using context.arc:

// draw angleSymbol using context.arc

ctx.save();
ctx.beginPath();
ctx.moveTo(pt2.x,pt2.y);
ctx.arc(pt2.x,pt2.y,20,a1,a2);
ctx.closePath();
ctx.fillStyle="red";
ctx.globalAlpha=0.25;
ctx.fill();
ctx.restore();

Step#3: Draw the degree angle in text

And you can draw the text of the angle (converted to degrees) using context.fillText:

// draw the degree angle in textvar a=parseInt((a2-a1)*180/Math.PI+360)%360;
ctx.fillStyle="black";
ctx.fillText(a,pt2.x+15,pt2.y);