How to draw an oval in html5 canvas?

Question

There doesnt seem to be a native function to draw an oval-like shape. Also i am not looking for the egg-shape.

Is it possible to draw an oval with 2 bezier curves? Somebody expierenced with that?

My purpose is to draw some eyes and actually im just using arcs. Thanks in advance.

Solution

So scale() changes the scaling for all next shapes. Save() saves the settings before and restore is used to restore the settings to draw new shapes without scaling.

Thanks to Jani

ctx.save(); ctx.scale(0.75, 1); ctx.beginPath(); ctx.arc(20, 21, 10, 0, Math.PI*2, false); ctx.stroke(); ctx.closePath(); ctx.restore(); 

Answer 1

Here is a simplified version of solutions elsewhere. I draw a canonical circle, translate and scale and then stroke.

function ellipse(context, cx, cy, rx, ry){         context.save(); // save state         context.beginPath();          context.translate(cx-rx, cy-ry);         context.scale(rx, ry);         context.arc(1, 1, 1, 0, 2 * Math.PI, false);          context.restore(); // restore to original state         context.stroke(); } 

Answer 2

updates:

• scaling method can affect stroke width appearance
• scaling method done right can keep stroke width intact
• canvas has ellipse method that Chrome now supports
• added updated tests to JSBin

JSBin Testing Example (updated to test other's answers for comparison)

• Bezier - draw based on top left containing rect and width/height
• Bezier with Center - draw based on center and width/height
• Arcs and Scaling - draw based on drawing circle and scaling
  • see Deven Kalra's answer
• Quadratic Curves - draw with quadratics
  • test appears to not draw quite the same, may be implementation
  • see oyophant's answer
• Canvas Ellipse - using W3C standard ellipse() method
  • test appears to not draw quite the same, may be implementation
  • see Loktar's answer

Original:

If you want a symmetrical oval you could always create a circle of radius width, and then scale it to the height you want (edit: notice this will affect stroke width appearance - see acdameli's answer), but if you want full control of the ellipse here's one way using bezier curves.

<canvas id="thecanvas" width="400" height="400"></canvas>  <script> var canvas = document.getElementById('thecanvas');  if(canvas.getContext)  {   var ctx = canvas.getContext('2d');   drawEllipse(ctx, 10, 10, 100, 60);   drawEllipseByCenter(ctx, 60,40,20,10); }  function drawEllipseByCenter(ctx, cx, cy, w, h) {   drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h); }  function drawEllipse(ctx, x, y, w, h) {   var kappa = .5522848,       ox = (w / 2) * kappa, // control point offset horizontal       oy = (h / 2) * kappa, // control point offset vertical       xe = x + w,           // x-end       ye = y + h,           // y-end       xm = x + w / 2,       // x-middle       ym = y + h / 2;       // y-middle    ctx.beginPath();   ctx.moveTo(x, ym);   ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);   ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);   ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);   ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);   //ctx.closePath(); // not used correctly, see comments (use to close off open path)   ctx.stroke(); }  </script>