In this script, we will Make JavaScript Irregular Polygons, using our Make Anti-alias (Almost) Lines script as the core. For line drawing, there's Bresenham's Line Algorithm and then there's everything else. Here's a nice polygon maker based on our NON-Bresenham line maker, which in turn is based on figuring out the hypotenuse of a triangle formed from using two given points as vertices and assuming the 90-degree angle vertices is not found at either point. These will be opposite ends of our line, a.k.a. our hypotenuse. The hypotenuse formula is one all high school students recognize—getting the square root of the sum of the squares of two adjacent sides. Of course, we are referring to right triangles only. Feel free to use the Make Anti-alias (Almost) Lines Using Bresenham's Line Algorithm instead.

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

The onscreen instructions say it all: CLICK MOUSE, MOVE MOUSE, THEN CLICKS MAKE LINES. PRESS ANY KEY FOR STARTING NEW SHAPE. It makes no difference how many lines or how long they are, or whether you press any key often to start a new shape. Although browsers may balk once there are over 135,000 divs on the screen. Because divs are used for each of the points in each of the lines. So you can see how they could add up pretty fast! What is this program good for? Damn good question! It sure won't compete with any computer-aided drawing program (like Microsoft Paint or ImageForge or DrawPlus X6 or Photoshop) any time soon! This experiment/utility/app draws lines with 4x4 divs with grey backgrounds. Feel free to try 1x1, 2x2, 3x3, or other sizes of line points, by finding CSS styles width:4px; and height:4px and changing them, and change background-color:#a4a4a4; to black, red, or whatever, if you like.

On to the script. First, after a few JavaScript variable declarations, we have function startmouse() {document.onmousemove=getCoords; document.onclick=line; document.onkeypress=restart;}. The startmouse() function is run by the onload event in the body tag. Notice how we are registering event handlers. We do not use () after them, as that is not how you register event handlers. So, first we assert that the onmousemove event will run the getCoords() function. We need the mouse coordinates to always be known by the script, to make it work right. Next, we run the line() function when the left mouse button is clicked. Finally, we run the restart function when a key is pressed. This is for restarting—begin a new polygon.

The getCoords() function itself is mostly the standard coordinate reader, which uses different properties depending on the browser, but instead of browser sniffing we check for object support. The clientX event attribute returns the horizontal coordinate (according to the client area) of the mouse pointer when an event was triggered. The client area is the current window. The clientY event attribute returns the vertical coordinate (according to the client area) of the mouse pointer when an event was triggered. The pageX property returns the position of the mouse pointer, relative to the left edge of the document. The pageY property sets or returns the y-coordinate of the mouse pointer relative to the top-left corner of the browser window's client area. The scrollTop property sets or retrieves the number of pixels by which the contents of an object are scrolled upward. The scrollLeft property sets or retrieves the number of pixels by which the contents of an object are scrolled to the left.

The goodline() function uses the Pythagorean theorem equation, which is the 2500-year-old formula for finding the length of the hypotenuse. The Pythagorean equation can be used to solve for a missing side on any right triangle. In the program below, given two points we find the length of the line between two given points. Then a variation on slope-intercept form and point-slope form equations is used to plot each point of the line using 4-pixel-wide colored DIVs with the background-color:#a4a4a4. Although the result is not quite a line with anti-aliased smoothness, this technique is the next best thing. And then we use the innerHTML property, which can be used, as below, to modify your document's HTML on the fly—in this case by slapping a buttload of DIVs on the page. Feel free to use 1-pixel-wide DIVs with the background-color:#000 if you just want a simple line. A wider greyer one is more presentable, in our opinion. Especially for line charts. The lighter the grey, the more it looks anti-aliased—change the color and see for yourself.

In the function line() which is run by left mouse button clicking, if flag is 1 so a click has occurred already, we first save the mouse coordinates into xb and yb. Next we save the former click's mouse position into xa and ya. Then we run the goodline() function and draw a line. Then we save the current line coordinates into the saved x and saved y variables xs and ys. If flag is 0, we set it to 1 and simply dump our mouse coordinates into xs and ys.

The function restart() merely sets flag to 0 so a new polygon will be started, but only if there was just a key press.

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

var xa, xb, ya, yb, x, y, yq, xq, ys, xs, flag;
var addtopage;
function startmouse() {document.onmousemove=getCoords; document.onclick=line; document.onkeypress=restart;}

function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){xq = e.pageX;yq = e.pageY;} else if
(e.clientX){xq = e.clientX + document.body.scrollLeft;yq = e.clientY + document.body.scrollTop;}}

function goodline(xa, xb, ya, yb) {
var addtopage = "";var linelength = Math.sqrt((xa-xb)*(xa-xb)+(ya-yb)*(ya-yb));
for(var i=0; i<linelength; i++){
x=Math.round(xa+(xb-xa)*i/linelength);
y=Math.round(ya+(yb-ya)*i/linelength);
addtopage += "<div style='position:absolute;left:"+x+"px;top:"+y+"px;background-color:#a4a4a4;width:4px;height:4px;font-size:1px'></div>";}
document.body.innerHTML += addtopage;}

function line(){
if(flag==1){xb=xq;yb=yq;xa=xs;ya=ys;goodline(xa, xb, ya, yb);xs=xb;ys=y;}
else{flag=1;xs=xq;ys=yq;}}

function restart(){flag=0;}

</script>
</head>
<body onload="startmouse()">
CLICK MOUSE, MOVE MOUSE, THEN CLICKS MAKE LINES. PRESS ANY KEY FOR STARTING NEW SHAPE.
</body>
</html>