Drawing ellipses with Canvas

[Andrew Poulos]

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

[vynogradov]

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

[Martin Honnen]

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/

[Andrew Poulos]

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

[Martin Honnen]

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/

[Martin Honnen]

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/