How to check the points initial and final point of the line which is clicked in a svg polyline or po

I have something working,

https://codepen.io/Alexander9111/pen/rNaERKa

HTML:

<svg id="svg" height="500" width="500" xmlns="http://www.w3.org/2000/svg"> 
    <polyline id="poly" points="100,100 150,200 250,150 100,100"/>
</svg>

JS:

const svg = document.getElementById("svg");
const poly = document.getElementById("poly");
const poly_width = getComputedStyle(poly)['stroke-width'];
console.log(parseInt(poly_width));
const half_width = parseInt(poly_width) / 2;

poly.onclick = function(e){
  const mousePos = [e.clientX,e.clientY];
  console.log(mousePos)
  const points = poly.getAttribute('points').split(' ').map(x => x.split(',').map(Number));
  const res= points.find((p, i) => {
    let prevPoint = points[i-1];
    if(i === 0){
      prevPoint = points[points.length - 1];
    }
    return arePointsCollinear(prevPoint, p, mousePos)
  });
  if(res){
    console.log(res);
    const NS = 'http://www.w3.org/2000/svg';
    const circle = document.createElementNS(NS,'circle');
    circle.setAttribute('r', '5');
    circle.setAttribute('cx', res[0]);
    circle.setAttribute('cy', res[1]);
    svg.appendChild(circle);
    console.log('circle');
  }
}

const getDistance = (pointA, pointB) => {
   const dx = Math.pow(pointA[0] - pointB[0], 2);
   const dy = Math.pow(pointA[1] - pointB[1], 2);
   return Math.sqrt(dx + dy);
};

const arePointsCollinear = (
   pointA,
   pointB,
   pointC
) => {
   const totalDistance = getDistance(pointA, pointB);
   const deltaAC = getDistance(pointA, pointC);
   const deltaBC = getDistance(pointB, pointC);
   return deltaAC + deltaBC <= Math.sqrt(totalDistance**2 + half_width**2);
};

Most important line is return deltaAC + deltaBC <= Math.sqrt(totalDistance**2 + half_width**2); - and I drew a diagram to explain where this comes from:

Basically, you need to account for the longest path that is still inside the stroke-width. I believe that is the square root of ( lengthAB^2 plus half_stroke-width^2 )

UPDATE

If you want to add lines instead you need to change points.find() to points.findIndex() then you can use the index and the prevIndex to draw a line between the points:

JS:

const svg = document.getElementById("svg");
const poly = document.getElementById("poly");
const poly_width = getComputedStyle(poly)['stroke-width'];
console.log(parseInt(poly_width));
const half_width = parseInt(poly_width) / 2;

poly.onclick = function(e){
  const mousePos = [e.clientX,e.clientY];
  console.log(mousePos)
  const points = poly.getAttribute('points').split(' ').map(x => x.split(',').map(Number));
  const res= points.findIndex((p, i) => {
    let prevPoint = points[i-1];
    if(i === 0){
      prevPoint = points[points.length - 1];
    }
    return arePointsCollinear(prevPoint, p, mousePos)
  });
  if(res != -1){
    console.log(res);
    const NS = 'http://www.w3.org/2000/svg';
    const line = document.createElementNS(NS,'line')
    // const circle = document.createElementNS(NS,'circle');
    // circle.setAttribute('r', '5');
    // circle.setAttribute('cx', points[res][0]);
    // circle.setAttribute('cy', points[res][1]);
    // svg.appendChild(circle);
    // console.log('circle');

    line.setAttribute('x1', points[res][0]);
    line.setAttribute('y1', points[res][1]);
    let prevIndex = (res === 0) ? (points.length - 1) : res - 1;
    line.setAttribute('x2', points[prevIndex][0]);
    line.setAttribute('y2', points[prevIndex][1]);
    svg.appendChild(line);
    console.log('line');
  }
}

const getDistance = (pointA, pointB) => {
   const dx = Math.pow(pointA[0] - pointB[0], 2);
   const dy = Math.pow(pointA[1] - pointB[1], 2);
   return Math.sqrt(dx + dy);
};

const arePointsCollinear = (
   pointA,
   pointB,
   pointC
) => {
   const totalDistance = getDistance(pointA, pointB);
   const deltaAC = getDistance(pointA, pointC);
   const deltaBC = getDistance(pointB, pointC);
   return deltaAC + deltaBC <= Math.sqrt(totalDistance**2 + (2*half_width)**2);
};