html5-canvas Paths Ellipse
Example
Note: Browsers are in the process of adding a built-in context.ellipse drawing command, but this command is not universally adopted (notably not in IE). The methods below work in all browsers.
Draw an ellipse given it's desired top-left coordinate:
// draws an ellipse based on x,y being top-left coordinate
function drawEllipse(x,y,width,height){
var PI2=Math.PI*2;
var ratio=height/width;
var radius=Math.max(width,height)/2;
var increment = 1 / radius;
var cx=x+width/2;
var cy=y+height/2;
ctx.beginPath();
var x = cx + radius * Math.cos(0);
var y = cy - ratio * radius * Math.sin(0);
ctx.lineTo(x,y);
for(var radians=increment; radians<PI2; radians+=increment){
var x = cx + radius * Math.cos(radians);
var y = cy - ratio * radius * Math.sin(radians);
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();
}
Draw an ellipse given it's desired center point coordinate:
// draws an ellipse based on cx,cy being ellipse's centerpoint coordinate
function drawEllipse2(cx,cy,width,height){
var PI2=Math.PI*2;
var ratio=height/width;
var radius=Math.max(width,height)/2;
var increment = 1 / radius;
ctx.beginPath();
var x = cx + radius * Math.cos(0);
var y = cy - ratio * radius * Math.sin(0);
ctx.lineTo(x,y);
for(var radians=increment; radians<PI2; radians+=increment){
var x = cx + radius * Math.cos(radians);
var y = cy - ratio * radius * Math.sin(radians);
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();
}
