HTML5 canvas to draw lines with arrows

 var canvas=document.getelementbyid ("Canvas");         var  context=canvas.getcontext ("2d");         function line (x1,y1 , X2,y2) {            this.x1=x1;             this.y1=y1;             this.x2=x2;             this.y2=y2;        }         line.prototype.drawwitharrowheads=function (CTX) {             // arbitrary styling             ctx.strokestyle= "Blue";             Ctx.fillstyle= "Blue";             ctx.linewidth=1;                          // draw the line             Ctx.beginpath ();             ctx.moveto (This.x1, THIS.Y1);             ctx.lineto (This.x2,this.y2);             ctx.stroke ();             // draw the starting arrowhead             var startradians=math.atan ((this.y2-this.y1)/ (this.x2-this.x1));             startradians+= (this.x2>this.x1)?90:90) *math.pi/180;            this.drawarrowhead ( Ctx,this.x1,this.y1,startradians);             //  draw the ending arrowhead             var endradians=math.atan ((this.y2-this.y1)/(this.x2-this.x1));             endradians+= ((this.x2>this.x1) 90:-90) *Math.PI/180;             this.drawarrowhead (Ctx,this.x2,this.y2,endRadians) ;        }         Line.prototype.drawarrowhead=function (Ctx,x,y,radians) {             ctx.save ();             Ctx.beginpath ();     &Nbsp;       ctx.translate (x, y);             ctx.rotate (radians);             ctx.moveto (0,0);             ctx.lineto (5,20);             ctx.lineto ( -5,20);             ctx.closepath ();             ctx.restore ();             ctx.fill ();        }         // create a new line object         var line=new line (50,50,250,275);         //  draw the linE        line.drawwitharrowheads (context); 

HTML5 canvas to draw lines with arrows