StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Arcs are often misunderstood to be circles which they aren't. Contrary to real circles (or rectangles which are closed paths them self, sub-paths) have open ends and can therefor be connected to other paths.</p> <p>Therefor it's important that you close the arc properly. You are almost there but by stroking the path before you close it the closing has no effect.</p> <p>Try to switch around the two lines so they look like this:</p> <pre><code>context.closePath(); context.stroke(); </code></pre> <p>And of course, there is the possibility that there is a bug in the version you are trying with (Chrome has had a lot of issues with arcs in the past).</p> <p><strong>Update</strong></p> <p>To provide a possible work around you can do this:</p> <p><strong>A)</strong> Manually creating a circle such as this one (I optimized it as best I could):</p> <p><strong><a href="http://jsfiddle.net/AbdiasSoftware/wTV58/" rel="nofollow noreferrer">ONLINE DEMO HERE</a></strong></p> <pre><code>function circle(ctx, cx, cy, radius) { var x, y, i = 2 * Math.PI, dlt = radius * 0.0005; while(i > 0) { x = cx + radius * Math.cos(i); y = cy + radius * Math.sin(i); i === 4 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); i -= dlt; } ctx.closePath(); } </code></pre> <p><strong>B)</strong> <a href="https://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas/2173084#2173084">create a circle using a Bezier</a> (it won't be a perfect circle but a very close resemblance):</p> <pre><code>function drawEllipse(ctx, x, y, w, h) { var kappa = 0.5522848, ox = (w * 0.5) * kappa, // control point offset horizontal oy = (h * 0.5) * kappa, // control point offset vertical xe = x + w, // x-end ye = y + h, // y-end xm = x + w * 0.5, // x-middle ym = y + h * 0.5; // 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(); ctx.stroke(); } </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