Soy un novato en JS y necesito dibujar una curva para resaltar algún objeto en la imagen. Entiendo, necesito usar quadraticCurveTo, y encontré el siguiente ejemplo:

 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();

Lo que no entiendo es cómo definir el ángulo de arco entre cada 2 puntos. Tampoco saqué como colocar mis puntos de control y que función cumplen en general (de aquí saqué, no son los puntos por los que pasa mi curva). Cualquier pista será muy apreciada.