Practical example: use quadratics for drawing curved arrows

We propose a useful function for drawing curved arrows. The code is a modified version of one that has been proposed by several contributors to this thread at StackOverflow.

Source code of the function that draws a curved arrow:

1. function drawCurvedArrow(startPointX, startPointY,
2.                          endPointX, endPointY,
4.                          lineWidth,
5.                          arrowWidth,
6.                          color) {
7.     // BEST PRACTICE: the function changes color and lineWidth -> save context!
8.     ctx.save();
9.     ctx.strokeStyle = color;
10.     ctx.lineWidth = lineWidth;
11.
12.     // angle of the end tangeant, useful for drawing the arrow head
14.
15.     // start a new path
16.     ctx.beginPath();
17.     // Body of the arrow
18.     ctx.moveTo(startPointX, startPointY);
20.     // Head of the arrow
21.     ctx.moveTo(endPointX (arrowWidth * Math.sin(arrowAngle Math.PI / 6)),
22.                endPointY (arrowWidth * Math.cos(arrowAngle Math.PI / 6)));
23.
24.     ctx.lineTo(endPointX, endPointY);
25.
26.     ctx.lineTo(endPointX (arrowWidth * Math.sin(arrowAngle + Math.PI / 6)),
27.                endPointY (arrowWidth * Math.cos(arrowAngle + Math.PI / 6)));
28.
29.     ctx.stroke();
30.     ctx.closePath();
31.     // BEST PRACTICE -> restore the context as we saved it at the beginning
32.     // of the function
33.     ctx.restore();
34. }