title: I am trying to rotate an ellipse with an arbitrary angle in JavaScript. But the outcome is not even an ellipse
body: <p>I wish to display the Fresnel zone in the chart in which I am hoping to rotate an ellipse by an arbitrary angle. I have given the starting and ending x and y coordinates and I want the ellipse to be rotated not at the center but at the starting point. I have taken help from the below link still I am unable to get a proper ellipse rotated with an angle. Any help would be highly appreciated. Also, the x coordinates need to be formatted to bring the ellipse together. But I am unable to manage that too.</p>
  <p><a href="https://stackoverflow.com/questions/44567694/drawing-fresnel-ellipse-and-major-axis">Drawing (Fresnel) ellipse and major axis</a></p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
  
      &lt;style&gt;
        .chart-container {
          width: 600px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;chart-container&quot;&gt;
        &lt;canvas id=&quot;myChart&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;script&gt;
        var step = (2 * Math.PI) / 30;
        console.log(&quot;step&quot;, step);
        f = 217.25; // frequency
        x1 = 0;
        x2 = 15;
        y2 = 250;
        y1 = 130;
        fr = f * Math.pow(10, 6); // frequency in Hz
        c = 2.997925 * Math.pow(10, 8); // speed of light
        lambda = c / fr;
        xarr = [];
        yarr = [];
        a = (1 / 2) * Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // radius of major axis
        r = Math.sqrt((lambda * a) / 2); // radius of the minor axis
        w = Math.atan2(y2 - y1, x2 - x1);
        console.log(w);
        for (i = 0; i &lt;= 2 * Math.PI; i += step) {
          xval = a * Math.cos(i);
          yval = r * Math.sin(i);
          xnew = (x1 + x2) / 2 + xval * Math.cos(w) - yval * Math.sin(w);
          ynew = (y1 + y2) / 2 + xval * Math.sin(w) + yval * Math.cos(w);
          xarr.push(xnew);
          yarr.push(ynew);
        }
        console.log(xarr);
        const data = {
          labels: xarr,
          datasets: [
            {
              data: yarr,
              borderColor: &quot;rgba(0,0,0,1)&quot;,
            },
          ],
        };
        const config = {
          type: &quot;line&quot;,
          data: data,
          options: {
            scales: {
              x: {
                ticks: {
                  maxTicksLimit: 5,
                  beginAtZero: true,
                },
              },
              y: {
                beginAtZero: true,
                maxTicksLimit: 5,
                grid: {
                  display: true,
                },
              },
            },
          },
        };
        const mychart = new Chart(document.getElementById(&quot;myChart&quot;), config);
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;````
  </code></pre>