By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,286 Members | 1,672 Online
Bytes IT Community
+ Ask a Question
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
Share this Question
Share on Google+
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
<http://www.redgrittybrick.org/postscript/respectively
<http://www.redgrittybrick.org/postscript/ellipse.htmlwhich talks
about doing ellipses with Postscript.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 18 '06 #3

P: n/a
Martin Honnen wrote:
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();
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.