JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

function drawDiamondhead(locx, locy, angle, sizex, sizey) {
ctx.save();
    var hx = sizex / 2;
    var hy = sizey / 2;
ctx.translate((locx ), (locy));
ctx.rotate(angle+1);
ctx.translate(-hx+(Math.sqrt(sizex*sizex, sizey*sizey)/2),-hy-(Math.sqrt(sizex*sizex, sizey*sizey)/2));

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

function drawArrowhead(locx, locy, angle, sizex, sizey) {
ctx.save();
    var hx = sizex / 2;
    var hy = sizey / 2;
ctx.translate((locx ), (locy));
ctx.rotate(angle);
ctx.translate(-hx+(Math.sqrt(sizex*sizex, sizey*sizey)/2),-hy+(Math.sqrt(sizex*sizex, sizey*sizey)/sizey));

    ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,1*sizey);    
ctx.lineTo(1*sizex,1*hy);
ctx.closePath();
ctx.fill();
ctx.restore();
}
    
function findAngle(sx, sy, ex, ey) { return Math.atan2((ey - sy) , (ex - sx)); }

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

var points = [
    { x: 10, y: 10 },
    { x: 50, y: 80 },
    { x: 100, y: 20 },
    { x: 100, y: 70 },    
];
    
ctx.lineWidth = 10;

ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);

var i;
for (i = 1; i < points.length - 2; i ++)
{
    var xc = (points[i].x + points[i + 1].x) / 2;
    var yc = (points[i].y + points[i + 1].y) / 2;
    ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}
ctx.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x,points[i+1].y);
ctx.stroke();

drawArrowhead(points[i+1].x, points[i+1].y, findAngle(points[i].x, points[i].y, points[i+1].x,points[i+1].y), 20, 25);

ctx.strokeStyle="black";
ctx.fillStyle="white";
ctx.lineWidth = 1;

/*
    Code die de punten tekent
*/

for (var d = 0; d < points.length; d++)
{
    ctx.beginPath();
    ctx.arc(points[d].x - 1, points[d].y - 1, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
}