For circle drawing, there's Bresenham's Circle Algorithm and Midpoint Circle Algorithm and a the two algorithms compared and then there's everything else such as this trigonometric circle where the guy couldn't figure a way to avoid points on the circle or ellipse having spaces in between. Here's a nice Ellipse maker based on the standard trigonometric circle algorithm but tweaked to create a good looking Ellipse.

JavaScript Charts, Graphs, Graphics, Circles, Ellipses, Arcs, Lines, and Polygons
Grab and Drop, Not Drag and Drop
Add Ids and onClicks to Divs
Add Ids and onClicks and Grab and Drop to Divs
Make Anti-alias (Almost) Lines
Make Anti-alias (Almost) Lines Using Bresenham's Line Algorithm
Good JavaScript Circle Algorithm
Good JavaScript Ellipse Algorithm
Good JavaScript Arc Algorithm
Make JavaScript Irregular Polygon
JavaScript Area of Irregular Polygon Algorithm
Make Line Chart from User-Inputted Data
Make Line Chart from CSV Data
Make Line Chart from MySQL Table Data
Make Bar Chart from User-Inputted Data
Make Bar Chart from CSV Data
Make Bar Chart from MySQL Table Data
Make Pie Chart from User-Inputted Data
Make Pie Chart from CSV Data
Make Pie Chart from MySQL Table Data



There are endless reasons to need an ellipse. Our reason was to mount a response to the fact that we combed cyberspace for any sign of a good JavaScript ellipse and we came up empty. We were hoping that by checking out the algorithm we already had, called Good JavaScript Circle Algorithm, and then studying some of the ellipse algorithms, we could determine how to adjust the circle script to make an ellipse script, since, as everyone who ever took geometry knows, a circle is just a special case of the ellipse formula. The distance between antipodal points on the ellipse (pairs of points whose midpoint is at the center of the ellipse) is maximum along the major axis, and a minimum along the perpendicular minor axis

We chose to avoid jQuery and HTML5's Canvas since the former is unneeded and the latter has unsatisfactory support from browsers, and it's more fun just programming in straight JavaScript. There are JavaScript libraries around that have circle and ellipse routines, but you do not learn programming by cheating! And the same can be said for using filters and transforms which each browser does their own way—there's no standard—so this requires several different functions plus browser sniffing and IE dumped support for one method and supported another with little warning. (Note: even though you can use the PHP GD library functions like imageellipse() to draw circles or ellipses on images, this may mean creating an image as big as the screen, using up RAM memory like a wild man. Even though PHP programmers use the imagedestroy() function to clear the memory BEFORE the script ends, what if image creation itself runs you out of memory? If not, the imagedestroy() function is useful to keep memory usage DURING the script to an acceptable level.)

If you'd like to see an ellipse algorithm written in JavaScript using the HTML5 canvas element to draw into: Algorithm to draw circles and ellipses.

Now, back to the problem at hand. The circle algorithm using trigonometric functions sine and cosine is fairly straightforward. The general formulas are x = xmiddle + radius * cos(angle) and y = ymiddle + radius * sin(angle) and 2PI radians = 360 degrees. Then change the normal incrementation steps to 720 and add 0.5 to increase precision, and make 3x3 points from a gif that could be replaced with an empty div with a colored background.

So to check out the difference between circle and ellipse formulas. Notice that the only thing different about the formulas is that the ellipse has 2 radii, the circle has only one. So to test this, change the semimajor axes and semiminor axes to radius in the ellipse formula and you now have a circle as just a special case of the ellipse algorithm.

CIRCLE:
Plot points at X and Y increasing angle from 0 to 360 (2PI radians) or increase precision by using 720 everywhere so there are fewer gaps in the points, and at the sizes we show here, no gaps, as long as the "points" are 3x3 rather than 1x1 or 2x2. For bigger gapless ellipses and circles, increase 3x3 to 4x4 or 5x5—etc.
X = parseInt(xmiddle+(radius*Math.sin(angle*2*(Math.PI/720)))+0.5);
Y = parseInt(ymiddle+(radius*Math.cos(angle*2*(Math.PI/720)))+0.5);

ELLIPSE:
Plot points at X and Y increasing angle from 0 to 360 (2PI radians) or increase precision by using 720 everywhere so there are fewer gaps in the points, and at the sizes we show here, no gaps, as long as the "points" are 3x3 rather than 1x1 or 2x2. For bigger gapless ellipses and circles, increase 3x3 to 4x4 or 5x5—etc.
X= parseInt(xmiddle + (semimajor axes * Math.cos(angle*2*(Math.PI/720)))+0.5);
Y = parseInt(ymiddle + (semiminor axes * Math.sin(angle*2*(Math.PI/720)))+0.5);

We run the script from the onload event in the body tag, supplying both of the radii and the center coordinates.

<html>
<head>
<script type="text/javascript">

var x,y; // center of the ellipse
var a,b; //semimajor (biggest radius) axes and semiminor (smallest radius) axes
var xlast = -1;
var ylast = -1;
var X,Y;

function ellipse(x, y, a, b){
for (var angle = 0; angle <= 720; angle++) {
X= parseInt(x + (a * Math.cos(angle*2*(Math.PI/720)))+0.5);
Y = parseInt(y + (b * Math.sin(angle*2*(Math.PI/720)))+0.5);
if (xlast != X || ylast != Y){
xlast = X;ylast = Y;
document.write("<div style='position:absolute;left:"+X+"px;top:"+Y+"px'><IMG SRC='3x3.gif' WIDTH=3 HEIGHT=3 BORDER=0></div>");}}}
</script>
</head>
<body onload = "ellipse(500, 300, 340, 200);">
</body>
</html>