JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<canvas id="c" width="1200" height="1200" style="width: 600px; height: 600px;"></canvas>

CSS

canvas {
  border: 1px solid red;
}

JavaScript

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
ctx.scale(2, 2);

drawArrowhead(ctx, {x: 20, y: 30}, {x: 100, y: 200}, 5);

function drawArrowhead(context, from, to, radius) {
	var x_center = to.x;
	var y_center = to.y;

	var angle;
	var x;
	var y;

	context.beginPath();
  
  ctx.moveTo(from.x, from.y);
  ctx.lineTo(to.x, to.y);
  ctx.lineWidth = 5;
  ctx.stroke();

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