Javascript 如何在画布中绘制具有适当坐标的箭头

我已经用下面几行代码画出了这条曲线，我需要画一个箭头。为此，我需要画两条有一定角度的线，并将其旋转一定角度。画起来很混乱。我正在跟随箭头中提供的职位

.html

<canvas id = "canvas" width = "100px" height = "120px"></canvas>

}

我试着让自己看起来像

箭头（{x:10，y:10}，{x:100，y:140}，15）//函数在重新加载时调用。
功能箭头（p1、p2、尺寸）{
变量角度=数学atan2（（p2.y-p1.y），（p2.x-p1.x））；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//曲线
ctx.fillStyle=“”；
ctx.fillRect（0,0200200）；
ctx.strokeStyle=‘白色’；
ctx.beginPath（）；
ctx.线宽=3；
ctx.moveTo（40,20）；
ctx.bezierCurveTo（30,40，-011010149.5）；
ctx.moveTo（100150.6）；
ctx.lineTo（82133）；
ctx.stroke（）；
ctx.moveTo（100149.7）；
ctx.lineTo（76146）；
ctx.stroke（）；
//画一个三角形？？
}

---

曲线与我的屏幕截图不一样。画布尺寸也不匹配。你能写代码只画箭头并把它放在我的曲线底部的位置吗？我想我可以接受这个答案，如果你能在链接中看到aikon编写的ans使用javascript函数，那么我最后能做的就是抱歉

  arrow({ x: 10, y: 10 }, { x: 100, y: 140 }, 15); //function called on reload.

  function arrow(p1, p2, size) {
  var angle = Math.atan2((p2.y - p1.y), (p2.x - p1.x));

  //curve line
  ctx.strokeStyle = 'white';      
  ctx.beginPath();      
  ctx.lineWidth=3;     
  ctx.moveTo(40,0);     
  ctx.bezierCurveTo(30, 0, -70, 75, 100, 150);
  ctx.lineTo(100,120)         
  ctx.stroke();

 //to draw a triangle ??