title: How do I draw a smooth curve in JS , that repeats the outlines of some object on the image (ex. - mountain or waterfall )?
body: <p>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 :</p>
  <pre><code>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(&quot;2d&quot;)
    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();
  </code></pre>
  <p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo" rel="nofollow noreferrer">here</a> I got , it's not the points my curve is going through). Any hint will be very appreciated.</p>