459,286 Members | 1,672 Online
Need help? Post your question and get tips & solutions from a community of 459,286 IT Pros & Developers. It's quick & easy.

# Drawing ellipses with Canvas

 P: n/a Is there a right/best way to draw an ellipse using Canvas? (With VML there's the v:oval element which makes the exercise trivial). I tried drawing a 360 degree arc (a circle) and then scaling it but that also scales the thickness of the circumference. I'm trying bezier curves but without visual feedback it's pretty hard to draw. And quadratic beziers give, at least with the control points I can set, an oblate form. Whereas the only way I can set a cubic bezier's control points is by guessing. Andrew Poulos Oct 18 '06 #1
5 Replies

 P: n/a Andrew Poulos wrote: Is there a right/best way to draw an ellipse using Canvas? (With VML there's the v:oval element which makes the exercise trivial). I tried drawing a 360 degree arc (a circle) and then scaling it but that also scales the thickness of the circumference. I'm trying bezier curves but without visual feedback it's pretty hard to draw. And quadratic beziers give, at least with the control points I can set, an oblate form. Whereas the only way I can set a cubic bezier's control points is by guessing. Andrew Poulos See this document: http://developer.apple.com/documenta...es/Canvas.html Oct 18 '06 #2

 P: n/a Andrew Poulos wrote: Is there a right/best way to draw an ellipse using Canvas? (With VML there's the v:oval element which makes the exercise trivial). I tried drawing a 360 degree arc (a circle) and then scaling it but that also scales the thickness of the circumference. This example function addEllipsePath (context, cx, cy, r1, r2, startAngle, endAngle) { context.save(); context.translate(cx, cy); context.scale(r1, r2); context.arc(0, 0, 1, startAngle, endAngle, 0); context.restore(); } var canvas = document.createElement('canvas'); canvas.width = 300; canvas.height = 300; canvas.style.border = '1px solid green'; document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.strokeStyle = 'rgba(255, 0, 0, 1)'; addEllipsePath(context, 150, 150, 30, 60, 0, Math.PI * 2); context.lineWidth = 3; context.stroke(); works for me with Firefox 1.5 on Windows, but Opera 9.02 does not show the ellipse. Please report back whether it works with Safari. The idea of the above approach was taken from

 P: n/a Martin Honnen wrote: Andrew Poulos wrote: >Is there a right/best way to draw an ellipse using Canvas? (With VMLthere's the v:oval element which makes the exercise trivial). I trieddrawing a 360 degree arc (a circle) and then scaling it but that alsoscales the thickness of the circumference. This example function addEllipsePath (context, cx, cy, r1, r2, startAngle, endAngle) { context.save(); context.translate(cx, cy); context.scale(r1, r2); context.arc(0, 0, 1, startAngle, endAngle, 0); context.restore(); } var canvas = document.createElement('canvas'); canvas.width = 300; canvas.height = 300; canvas.style.border = '1px solid green'; document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.strokeStyle = 'rgba(255, 0, 0, 1)'; addEllipsePath(context, 150, 150, 30, 60, 0, Math.PI * 2); context.lineWidth = 3; context.stroke(); Thanks, now I'm unsure why my ellipse experiment (of which I no longer have a copy) caused the line width to scale when I scaled the circle. works for me with Firefox 1.5 on Windows, but Opera 9.02 does not show the ellipse. Please report back whether it works with Safari. I don't own a Mac so it'll be a little while before I get to testing on Safari. One follow up question. I'm making the canvas fill the entire browser window (because there'll be items drawn at various places about the screen) but doing so means that I can't click "through" the transparent part of the canvas to click buttons underneath. Is there a way to let clicks pass through? Andrew Poulos Oct 19 '06 #4

 P: n/a Andrew Poulos wrote: Thanks, now I'm unsure why my ellipse experiment (of which I no longer have a copy) caused the line width to scale when I scaled the circle. Because you probably did not save before doing the translation and scaling and calling arc to then restore before you stroke. -- Martin Honnen http://JavaScript.FAQTs.com/ Oct 19 '06 #5

 P: n/a Martin Honnen wrote: [cllipse in canvas] works for me with Firefox 1.5 on Windows, but Opera 9.02 does not show the ellipse. Please report back whether it works with Safari. I have checked with Safari 2.0 myself and it nicely draws the ellipse like Firefox. -- Martin Honnen http://JavaScript.FAQTs.com/ Oct 20 '06 #6

### This discussion thread is closed

Replies have been disabled for this discussion.