HTML5 कैनवस में अंडाकार (ओवल) कैसे ड्रा करें?

उदाहरण

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <canvas id="newCanvas" width="450" height="300"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var context = c.getContext('2d');
      var cX = 0;
      var cY = 0;
      var radius = 40;
      context.save();
      context.translate(c.width / 2, c.height / 2);
      context.scale(2, 1);  // X दिशा में 2x स्केल -> अंडाकार
      context.beginPath();
      context.arc(cX, cY, radius, 0, 2 * Math.PI, false);
      context.restore();
      context.fillStyle = '#000000';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'yellow';
      context.stroke();
    </script>
  </body>
</html>

आउटपुट

तकनीक: scale(2, 1) से सर्कल को X-अक्ष पर खींचकर अंडाकार बनाएं। ellipse() मेथड (आधुनिक) सीधे अंडाकार ड्रा करता है: ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)।