StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>updates:</strong></p> <ul> <li>scaling method can affect stroke width appearance </li> <li>scaling method done right can keep stroke width intact</li> <li>canvas has ellipse method that Chrome now supports </li> <li>added updated tests to JSBin </li> </ul> <p><a href="http://jsbin.com/ovuret/722/edit" rel="nofollow noreferrer">JSBin Testing Example</a> (updated to test other's answers for comparison)</p> <ul> <li>Bezier - draw based on top left containing rect and width/height</li> <li>Bezier with Center - draw based on center and width/height</li> <li>Arcs and Scaling - draw based on drawing circle and scaling <ul> <li>see <a href="https://stackoverflow.com/a/8372834/415">Deven Kalra's</a> answer</li> </ul></li> <li>Quadratic Curves - draw with quadratics <ul> <li>test appears to not draw quite the same, may be implementation</li> <li>see <a href="https://stackoverflow.com/a/15162444/415">oyophant's</a> answer</li> </ul></li> <li>Canvas Ellipse - using W3C standard ellipse() method <ul> <li>test appears to not draw quite the same, may be implementation</li> <li>see <a href="https://stackoverflow.com/a/23184724/415">Loktar's</a> answer</li> </ul></li> </ul> <p><strong>Original:</strong></p> <p>If you want a symmetrical oval you could always create a circle of radius width, and then scale it to the height you want (<em>edit:</em> 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. </p> <pre><code><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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload