Estoy tratando de hacer una línea de flecha en el lienzo HTML que se puede dibujar arrastrando el mouse, pero estoy luchando para arreglar la punta de flecha en todas las direcciones. Soy un principiante, así que ¿pueden ayudarme a solucionar el problema? Sería muy apreciado ingresar la descripción de la imagen aquí .

Aquí está mi código

 _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 && ((ax = ax + aw), (aw = -1 * aw)), a.pageY < c && ((ay = ay + ah), (ah = -1 * ah)), (this.ctxTemp.lineJoin = "round"), this.ctxTemp.beginPath(), console.log(a); const head_len = 16; const head_angle = Math.PI / 6; var dx = (ax + aw) - ax; var dy = (ay + ah) - ay; const angle = Math.atan2(dy, dx); this.ctxTemp.beginPath(); this.ctxTemp.moveTo(ax, ay), //fromx , fromy this.ctxTemp.lineTo(ax + aw, ay + ah), //tox,toy this.ctxTemp.stroke(); this.ctxTemp.beginPath(); this.ctxTemp.lineTo((ax + aw), (ay + ah)); this.ctxTemp.lineTo((ax + aw) - head_len * Math.cos(angle - head_angle), (ay + ah) - head_len * Math.sin(angle - head_angle)); this.ctxTemp.lineTo((ax + aw) - head_len * Math.cos(angle + head_angle), (ay + ah) - head_len * Math.sin(angle + head_angle)); this.ctxTemp.closePath(), this.ctxTemp.stroke(); this.ctxTemp.fill(); },