I am trying to make an arrow line in HTML canvas that can be drawn with mouse drag, but I am struggling to fix the arrowhead in every direction. I am a beginner so can u help me fix the issue ,it will be very appreciating enter image description here

Here is my code

_drawLineMove: function (a) {
            this._drawShapeMove(a, 1);
            var b = this.canvasTempLeftOriginal,
                c = this.canvasTempTopOriginal;
            //var headlen = 10; // length of head in pixels
                a.pageX < b && ((a.x = a.x + a.w), (a.w = -1 * a.w)),
                a.pageY < c && ((a.y = a.y + a.h), (a.h = -1 * a.h)),
                (this.ctxTemp.lineJoin = "round"),
                this.ctxTemp.beginPath(),
                console.log(a);
                  const head_len = 16;
                  const head_angle = Math.PI / 6;
                  var dx = (a.x + a.w) - a.x;
                  var dy = (a.y + a.h) - a.y;
                  const angle = Math.atan2(dy, dx);
                this.ctxTemp.beginPath();
                this.ctxTemp.moveTo(a.x, a.y), //fromx , fromy
                this.ctxTemp.lineTo(a.x + a.w, a.y + a.h), //tox,toy
                this.ctxTemp.stroke();
                this.ctxTemp.beginPath();
                this.ctxTemp.lineTo((a.x + a.w), (a.y + a.h));
                this.ctxTemp.lineTo((a.x + a.w) - head_len * Math.cos(angle - head_angle), (a.y + a.h) - head_len * Math.sin(angle - head_angle));
                this.ctxTemp.lineTo((a.x + a.w) - head_len * Math.cos(angle + head_angle), (a.y + a.h) - head_len * Math.sin(angle + head_angle));
                  this.ctxTemp.closePath(),
                  this.ctxTemp.stroke();
                  this.ctxTemp.fill();
        },