In this article I am going to draw ellipse with Midpoint Circle algorithm. Find more about Midpoint circle algorithm at http://en.wikipedia.org/wiki/Midpoint_circle_algorithm

### CSS :

```#ellipse b {
position:absolute;
color:rgb(91,111,135);
}

#ellipse {
position:relative;
margin:auto;
width:800px;
height:400px;
vertical-align:center;
}

```

### jQuery :

xc, yc : Center of the Circle
ry : Radius of the  Circle
p : This is Radius Error Factor to calculate increment and decrements of X and Y coordinates.
x, y : Variables to calculate Coordinates.

```var ry=200, rx=400, xc=400, yc=200;
var x=0, y=ry;
var p=(ry*ry) - (rx*rx*ry) + ((rx*rx) / 4);
while ((2*x*ry*ry) < (2*y*rx*rx)) {
putpixel(xc + x, yc - y);
putpixel(xc - x, yc + y);
putpixel(xc + x, yc + y);
putpixel(xc - x, yc - y);

if (p < 0) {
x=x + 1;
p=p + (2*ry*ry*x) + (ry*ry);
} else {
x=x + 1;
y=y - 1;
p=p + (2*ry*ry*x + ry*ry) - (2*rx*rx*y);
}
}
p=(x + 0.5)*(x + 0.5)*ry*ry + (y - 1)*(y - 1)*rx*rx - rx*rx * ry*ry;

while (y >= 0) {
putpixel(xc + x, yc - y);
putpixel(xc - x, yc + y);
putpixel(xc + x, yc + y);
putpixel(xc - x, yc - y);

if (p > 0) {
y=y - 1;
p=p - (2*rx*rx*y) + (rx*rx);

} else {
y=y - 1;
x=x + 1;
p=p + (2*ry*ry*x) - (2*rx*rx*y) - (rx*rx);
}
}

function putpixel(mx, my) {
\$("#ellipse").append("<b style='left:" + mx + "px;top:" + my + "px'>.</b>");
}

```

#### 1 comment:

1. I love this. It is soo informative. Are you also searching for cheap assignment help we are the best solution for you. We are best known for delivering the best services to students without having to break the bank

## Blogroll Srinivas Dasari find me on facebook follow me on twitter