Drawing ellipses with Canvas

[Andrew Poulos]

Is there a right/best way to draw an ellipse using Canvas? (With VML
there's the vval 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]

Is there a right/best way to draw an ellipse using Canvas? (With VML
there's the vval 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/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html

 

[Martin Honnen]

Is there a right/best way to draw an ellipse using Canvas? (With VML
there's the vval 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.html> which talks
about doing ellipses with Postscript.

 

[Andrew Poulos]

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]

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]

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.