HTML Canvas - Draw curved arrows

Viewed 9136

I'm trying to draw curved arrows in a html canvas. I have no problem to draw a curved line but I don't know how to put the > at the end of the line (direction).

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();

My idea is taking a small part of the line at the end and draw a triangle. How can I get the coordinate of a point in the line?

Below is the image for better understanding.

Curve with arrow

1 Answers
Related