I'm a newbie in JS and I need to draw a curve, to highlight some object on the image. I understand , I need to use quadraticCurveTo,and found the following example :

const points = [{
    x: 1,
    y: 1
  }, {
    x: 20,
    y: 30
  }, {
    x: 30,
    y: 40
  }, {
    x: 40,
    y: 20
  }, {
    x: 50,
    y: 60
  }]
  
  const canvas = document.querySelector('canvas')
  const ctx = canvas.getContext("2d")
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  
  for (const point of points) {
    const xMid = (point.x + point.x) / 2;
    const yMid = (point.y + point.y) / 2;
    const cpX1 = (xMid + point.x) / 2;
    const cpX2 = (xMid + point.x) / 2;
    ctx.quadraticCurveTo(cpX1, point.y, xMid, yMid);
    ctx.quadraticCurveTo(cpX2, point.y, point.x, point.y);
  }
  ctx.stroke();

What I don't understand is how to define the angle of arc between each 2 points. Nor did I get how to place my control points and what function they fulfill in general (from here I got , it's not the points my curve is going through). Any hint will be very appreciated.