วิธีวาดรูปวงรี (Oval) ใน HTML5 Canvas

ใช้ context.scale(x, y) ยืดหรือบีบวงกลมให้กลายเป็นวงรี

ตัวอย่าง

<!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, cY = 0, radius = 40;
      context.save();
      context.translate(c.width / 2, c.height / 2);
      context.scale(2, 1); // ยืดแนวนอน 2 เท่า
      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>

ผลลัพธ์