javascript - Draw arrow at the end of elbow connector on Canvas -

I have applied the elbow connector tool to be drawn on the canvas, the elbow connector is working properly, but I I want to show the arrows. The end of the elbow connector I have added an arrow at the end of the line but how can I not get the proper angle for the end of the arrow and the end of my arrow rotates as my elbow connector moves . Can anyone help? Below is my code.

  var startPosX1, startPosY1, startPosX2 = "", startPosY2 = "", midPosX1, midPosY1; Function tool_ellero arrow connect () {var tool = this; this. Start = wrong; // cPush (); This.mousedown = function (ev) {tool.started = true; Tool.x0 = startPosX1 = ev.offsetX; Tool.y0 = startPosY1 = ev.offsetY; Cpush (); }; This.mousemove = function (ev) {if (! Tool.started) {return; } Context.clearRect (0, 0, canvas. Wide, canvas.); Context.strokeStyle = Stroke color; Var Karpos, Carpisi; CurPosX = ev.offsetX; Curcissive = ev.offsetY; // elbow connector logic if (curpicex> start pOSX1) {MIDPOS1 = ((curpos x - start pOSX1) / 2) + start pOSX1; } And if (startPosX> Qtros X) {midPosX1 = ((startPosX1 - curPosX) / 2) + curpox; } If (capricity> startup y1) {MIDPosY1 = ((curse - startPosY1) / 2) + startpage 1; } And if (startPosY1> curPosY) {MIDPosY1 = ((startPosY1 - curious) / 2) + curcisi; } // line1 context.beginPath (); Context.moveTo (startPosX1, startPosY1); Context.lineTo (midPosX1, startPosY1); Context.strokeStyle = Stroke color; Context.stroke (); Context.closePath (); // line2 context.beginPath (); Context.moveTo (midPosX1, startPosY1); Context.lineTo (midPosX1, curcisi); Context.strokeStyle = Stroke color; Context.stroke (); Context.closePath (); // line3 context.beginPath (); Context.moveTo (midPosX1, curPosY); Context.lineTo (Curpos, Curcissi); Context.strokeStyle = Stroke color; Context.stroke (); If (MidPos 1! = Undefined & amp; startPosX2 == "" & amp; startPosY2 == "") {startPosX2 = midPosX1; StartPosY2 = Cursed; } // context.closePath (); If (startPosX2! = Ev.offsetX and startPosY2! = Ev.offsetY) {var radianAngle = Math.atan ((ev.offsetY - startPosY2) / (ev.offsetx - startPosX2)); Radian angle + = ((eve offset x> startup 2)? 90: -90) * monastery PI / 180; Draw Arrowhead (EwfostX, Eve Offset, Radian Angles, Context); }}; This.mouseup = function (ev) {if (tool.started) {tool.mousemove (ev); Tool.started = false; Img_update (); }}; } Function drawerhead (X, Y, radian, CTX) {// reference.clairrack (X-5, Y-5, 10, 10); Ctx.save (); Ctx.strokeStyle = Stroke color; Ctx.lineWidth = 2; Ctx.beginPath (); Ctx.translate (x, y); Ctx.rotate (radians); Ctx.moveTo (0, 0); Ctx.lineTo (6, 10); Ctx.lineTo (-6, 10); Ctx.closePath (); Ctx.restore (); Ctx.fillStyle = Stroke color; Ctx.fill (); }    
 
 
 Since your arrowhead needs to be dragged to the proper angle at the end of the line , This is a restructuring of your code that works on behalf of the arrow, which is required to define the line:  
 Demo:  
  // given line x1 , Make an arrow size from y1 to x2, y2, x2, y2 to the correct angle var PI2 = Math.PI * 2; Function drawerhead (x1, y1, x2, y2) {var dx = x2-x1; Var die = y2-y1; Var radian = (mathematics.Tan2 (DE, DX) + PI 2)% PI2; Ctx.save (); Ctx.lineWidth = 2; Ctx.beginPath (); Ctx.translate (x2, y2); Ctx.rotate (radians); Ctx.moveTo (0,0); Ctx.lineTo (-10,6); Ctx.lineTo (-10, -6); Ctx.closePath (); Ctx.fillStyle = Stroke color; Ctx.fill (); Ctx.restore (); }