We need a formula / algorithm to find the area of a shape, based on user selected co-ordinates (mouse click). We know the x and y co-ordinates of each line drawn by the user, then using the pixel length of each line we can figure out the length, number of lines & maybe angles.
Currently we are using this formula: http://www.mathwords.com/a/area_convex_polygon.htm
But the problem is users don't always draw the shape in the correct order (counter-clockwise), which causes problems. This formula also plays up when the shape is too complicated.
The system is written to draw a line (measurement) for each corner clicked by the user, it works much like tracing paper, an image is displayed on a HTML5 Canvas, then the user clicks around the area they wish to trace and the jquery works out the distance based off the x and y co-ords.
Any help our even just pointed in the right direction would be helpful, it's a bit beyond me.
There shouldn't be a problem. This method (known as the Shoelace Theorem if you want to learn more about it) only requires that the vertices be traversed in a consistent order. This can be clockwise or counterclockwise; the only difference will be a sign change that the absolute value takes care of. So you can just use the order your users click in. Additionally, the theorem does not impose any requirements on the polygon, which may be concave.
What is important is that the polygon not self-intersect. This question solves that problem. If you do have intersections, you can either throw an error or add a vertex at the intersection and change the vertex order so that the shape "pinches" or "bounces" rather than crosses itself.