How to draw eclipse using HTML4,CSS2,jQuery

Please refer my previous post draw circle ,to get basic idea. Circle is instance of an Eclipse where both xradius and yradius are equal.

See the quick demo how it works and looks here.

Here is the idea how we get the points on Eclipse using trigonametry. You can apply this formula to any programming language.

x=centerX+Xradius*Math.sin(angle);
y=centerY+Yradius*Math.cos(angle );

Here is the function that will return the array of points exists on Eclipse. It will take five parameters ,centerx,centery , xradius,yradius,number of points we need.

function getCirclePoints(centerX,centerY,xradius,yradius,segments){
var totalPoints=new Array();
for(var i=0;i<(segments);i++){
x=centerX+xradius*Math.sin(i*2*Math.PI/segments);
y=centerY+yradius*Math.cos(i*2*Math.PI/segments );
totalPoints.push({'x':x,'y':y});
}
return totalPoints;
}

Demo

Animation Effect with above function

Animation Demo