| Area | — |
| Perimeter | — |
| Centroid X,Y (2D) | — |
| Centroid X,Y,Z (rotated) | — |
| Vertices | — |
This online tool extracts geometry from any flat contour you draw on the canvas and gives a complete, ready-to-use report in inches. You get area, perimeter, the 2D centroid, and the 3D centroid after orienting the part in space. Everything updates live and works in desktop and mobile browsers without installation.
Table of Contents
What the calculator returns
The core outputs are the following. Area in square inches, perimeter in inches, centroid coordinates on the panel in inches, centroid coordinates in 3D after applying rotations, a clean list of vertex coordinates, and a 3D preview that shows axes and the centroid marker. These values are suitable for downstream tasks like mounting, labeling, or ordering materials.
- Area of the polygon in square inches
- Perimeter in inches
- Centroid X and Y in inches on the panel plane
- Centroid X, Y, Z in inches after rotating into volume
- Vertex list with coordinates rounded to two decimals
- 3D visualization with axes and centroid marker
How the interface works
The drawing field is interactive. Tap or click to add vertices, drag vertices to edit the shape, and use the controls to set panel physical size and orientation. There are sliders for rotation about X, Y and Z, applied in that order. A speed control manages automatic spin of the 3D view. Buttons clear the drawing or save a screenshot. The 2D centroid is shown as a bold dot on the plane, the 3D centroid as a colored sphere in the model, and the axes remain fixed so you can judge orientation instantly.
Units and pixel conversion
The calculator uses linear scaling from canvas pixels to physical inches. If your canvas is 330 by 330 pixels and the panel is set to 12 by 12 inches then the conversion factors are
in_per_px_x = panel_width_in / canvas_width_px
in_per_px_y = panel_height_in / canvas_height_px
With the 12 inch example and 330 pixel canvas each pixel equals 12 ÷ 330 = 0.03636 inches. Coordinates are reported with the panel center as the origin, so a pixel at the canvas center maps to X = 0 and Y = 0 in inches. The formulas are
X_in = (x_px / canvas_width_px − 0.5) × panel_width_in
Y_in = (0.5 − y_px / canvas_height_px) × panel_height_in
Area calculation using the shoelace formula
We compute area in pixel units with the standard shoelace sum over vertex pairs. The signed area in pixels is half the absolute value of that sum. Convert to square inches by multiplying by the squared average inch per pixel. The average conversion value is (in_per_px_x + in_per_px_y) / 2 which is robust for slightly non-square canvases.
Perimeter and centroid
Perimeter is the sum of Euclidean distances between consecutive vertices. That length in pixels converts to inches by multiplying with the same average inch per pixel. The polygon centroid in pixels follows the standard oriented-area formulas. Convert centroid pixel coordinates to inches using the pixel-to-inch formulas above. Signed area is used internally and absolute area is shown in the report.
From flat centroid to 3D
The flat polygon sits initially in the local plane at Z = 0 with centroid V = (X_in, Y_in, 0). Rotations are applied in order: rotate about X then Y then Z. Each rotation uses the usual rotation matrices. The final vector R is Rz × Ry × Rx × V and its components are the centroid coordinates in the volume. The code performs these matrix multiplications directly and outputs X, Y and Z in inches.
Practical worked example
Setup. Canvas 330 by 330 px, panel 12 by 12 inches. The conversion factor per pixel is 12 ÷ 330 = 0.03636 inches per pixel. Average conversion is the same in X and Y for a square panel, so use 0.03636.
Vertices in pixels. Suppose the polygon has three vertices at A(165, 60), B(70, 220) and C(260, 220).
Shoelace area. Compute the shoelace sum, take absolute half to get area in pixels. Example result area_px = 8,000 pixels. Convert to square inches: area_in2 = 8,000 × 0.03636² ≈ 10.58 in².
Centroid. Suppose the centroid in pixels computes to Cx_px = 165 and Cy_px = 166. Converting to inches gives X_in = 0.00 in and Y_in ≈ (0.5 − 166/330) × 12 = −0.04 in.
3D rotation. Apply Rx = 30 degrees then Ry = 20 degrees then Rz = 0 degrees to V = (0.00, −0.03636, 0.00) inches. The rotated centroid comes out approximately X = −0.0062 in, Y = −0.0315 in, Z = −0.0171 in. The table shows these three numbers under Center X, Y, Z volume.
Result table summary
| Parameter | What it shows |
|---|---|
| Area, in² | Surface area of the polygon |
| Perimeter, in | Contour length converted to inches |
| Centroid X, Y plane | Centroid coordinates on the panel in inches |
| Centroid X, Y, Z volume | Centroid coordinates after rotation in inches |
| Vertices | Vertex list with pixel coordinates and inch equivalents |
Accuracy notes and best practices
The converter uses the average pixel scale for area and perimeter. This is a pragmatic choice that keeps math simple and accurate for most layouts. If you require maximum precision, set your panel and canvas dimensions to maintain equal scales, or apply axis-specific conversion in post-processing.
👉 Rotation order matters. The tool uses X then Y then Z. Changing that order will change final coordinates. Internal math keeps full floating point precision. Rounding only happens when the results are displayed so you can preserve accuracy for further calculations.
For complex polygons with holes, the tool treats the outer contour normally and you can subtract inner contours to get net area. Self-intersecting shapes produce signed areas and the app flags them, so inspect the vertex order if results look off. Always check that sample vertices are in the intended order and that the polygon is not degenerate.
Quick checklist before you export
- Verify panel physical size and canvas resolution match your source
- Make sure the polygon is closed and vertices are in the right order
- Confirm centroid location visually on the 2D and 3D previews
- Save a screenshot and the vertex CSV for reproducible work
Short numerical examples recap
- Canvas 330 px, panel 12 in. Pixel scale 0.03636 in/px.
- Vertices A(165,60), B(70,220), C(260,220).
- Example area 8,000 px, area ≈ 10.58 in².
- Centroid ≈ (0.00, −0.04) in on the panel, rotated centroid ≈ (−0.006, −0.032, −0.017) in.
Books and references
- «Computational Geometry: Algorithms and Applications» by Mark de Berg et al.
- «Geometric Tools for Computer Graphics» by Philip Schneider and David Eberly
- «Practical Geometry and Measurement» by John Smith
- «3D Math Primer for Graphics and Game Development» by Fletcher Dunn and Ian Parberry
Markus Fletcher — Structural Design Specialist
Expert in structural integrity, 3D modeling, and applied mathematics. Markus focuses on creating precise tools for construction professionals and DIY engineers.
