Code to create an arrowhead on an html5 canvas

canvasArrowhead.js

/**
 * Draw an arrowhead on a line on an HTML5 canvas.
 *
 * Based almost entirely off of http://stackoverflow.com/a/36805543/281460 with some modifications
 * for readability and ease of use.
 *
 * @param context The drawing context on which to put the arrowhead.
 * @param from A point, specified as an object with 'x' and 'y' properties, where the arrow starts
 *             (not the arrowhead, the arrow itself).
 * @param to   A point, specified as an object with 'x' and 'y' properties, where the arrow ends
 *             (not the arrowhead, the arrow itself).
 * @param radius The radius of the arrowhead. This controls how "thick" the arrowhead looks.
 */
function drawArrowhead(context, from, to, radius) {
	var x_center = to.x;
	var y_center = to.y;

	var angle;
	var x;
	var y;

	context.beginPath();

	angle = Math.atan2(to.y - from.y, to.x - from.x)
	x = radius * Math.cos(angle) + x_center;
	y = radius * Math.sin(angle) + y_center;

	context.moveTo(x, y);

	angle += (1.0/3.0) * (2 * Math.PI)
	x = radius * Math.cos(angle) + x_center;
	y = radius * Math.sin(angle) + y_center;

	context.lineTo(x, y);

	angle += (1.0/3.0) * (2 * Math.PI)
	x = radius *Math.cos(angle) + x_center;
	y = radius *Math.sin(angle) + y_center;

	context.lineTo(x, y);

	context.closePath();

	context.fill();
}

@codingbyraj It's been a little while since I've looked at this code, so I'll have to take a look for you. I'll see if I can check it out and answer your question this week.

Thank you @jwir3. I am trying too and will wait for your response.

yay

                const headSize = arrow.attrs.strokeWidth * 3;
		if (arrowAtStart) {
			const angle = Math.atan2(y2 - y1, x2 - x1);
			let delta = Math.PI / 6;
			for (let i = 0; i < 2; i++) {
				doc.moveTo(x1, y1);
				const x = x1 + headSize * Math.cos(angle + delta);
				const y = y1 + headSize * Math.sin(angle + delta);
				doc.lineTo(x, y);
				delta *= -1;
			}
		}

		if (arrowAtEnding) {
			let delta = Math.PI / 6;
			const angle = Math.atan2(y1 - y2, x1 - x2);
			for (let i = 0; i < 2; i++) {
				doc.moveTo(x2, y2);
				const x = x2 + headSize * Math.cos(angle + delta);
				const y = y2 + headSize * Math.sin(angle + delta);
				doc.lineTo(x, y);
				delta *= -1;
			}
		}
		doc.fillStroke();