Lienzo HTML - Dibujar flechas curvas

Question

Estoy tratando de dibujar flechas curvas en un lienzo html. No tengo ningún problema para dibujar una línea curva, pero no sé cómo poner el > al final de la línea (dirección).

ctx.beginPath(); 
    ctx.fillStyle = "rgba(55, 217, 56,"+ opacity +")"; 
    ctx.moveTo(this.fromX,this.fromY); 
    ctx.quadraticCurveTo(this.controlX, this.controlY, this.toX, this.toY); 
ctx.stroke(); 

Mi idea es tomar una pequeña parte de la línea al final y dibujar un triángulo. ¿Cómo puedo obtener la coordenada de un punto en la línea?

A continuación se muestra la imagen para una mejor comprensión.

Answer 1

Dado que está utilizando una curva cuadrática, ustedes saben dos puntos que conforman una línea que apunta en la "dirección" de la cabeza de flecha:

Así que tirar abajo una pizca de trigonometría y usted mismo tiene una solución. He aquí una función generalizada de que lo hará por usted:

http://jsfiddle.net/SguzM/

function drawArrowhead(locx, locy, angle, sizex, sizey) { 
    var hx = sizex/2; 
    var hy = sizey/2; 

    ctx.translate((locx), (locy)); 
    ctx.rotate(angle); 
    ctx.translate(-hx,-hy); 

    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.lineTo(0,1*sizey);  
    ctx.lineTo(1*sizex,1*hy); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.translate(hx,hy); 
    ctx.rotate(-angle); 
    ctx.translate(-locx,-locy); 
}   

// returns radians 
function findAngle(sx, sy, ex, ey) { 
    // make sx and sy at the zero point 
    return Math.atan2((ey - sy), (ex - sx)); 
}