JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

#canvas {
  border: 1px #AAAAAA dashed;
}

JavaScript

function getTrianglePoints(A, a_m, width) {
	// (A-a_m)/|A-a_m|
  var dir = {x: A.x-a_m.x,  y: A.y-a_m.y}
  var dirLen = Math.sqrt(dir.x*dir.x + dir.y*dir.y)
  dir.x /= dirLen
  dir.y /= dirLen
  
  // make orthogonal vector – swap
  var tmp = dir.x
  dir.x = -dir.y
  dir.y = tmp
  
  var hwidth = width/2
  
  var a_l = {x:  dir.x*hwidth + a_m.x,  y:  dir.y*hwidth + a_m.y}
  var a_r = {x: -dir.x*hwidth + a_m.x,  y: -dir.y*hwidth + a_m.y}
  
  return [A, a_l, a_r]
}


var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

var pt_A   = {x: 100, y: 100}
var pt_a_m = {x: 250, y: 120}
var width  = 100
var pts = getTrianglePoints(pt_A, pt_a_m, width)

var ptsize = 5
ctx.fillStyle = 'blue';
ctx.fillRect(pts[0].x, pts[0].y, ptsize, ptsize)
ctx.fillRect(pts[1].x, pts[1].y, ptsize, ptsize)
ctx.fillRect(pts[2].x, pts[2].y, ptsize, ptsize)