Good JavaScript Circle Algorithm
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 having spaces in between. Here's a nice circle maker based on the standard trigonometric circle algorithm but tweaked to create a good looking circle.
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 a circle. Our reason was to use the algorithm to create pie charts from CSV data or MySQL table data or Make Pie Chart from User-Inputted Data.
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 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 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.)
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.
We run the script from the onload event in the body tag, supplying radius and center coordinates.
<html>
<head>
<script type="text/javascript">
var x,y,radius,xmiddle,ymiddle;
var xlast = -1;
var ylast = -1;
function circle(radius,xmiddle,ymiddle){
for (var i = 0; i <= 720; i++) {
x = parseInt(xmiddle+(radius*Math.sin(i*2*(Math.PI/720)))+0.5)
y = parseInt(ymiddle+(radius*Math.cos(i*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 = "circle(200,500,300)">
</body>
</html>