A simple, intuitive polygon drawing tool built using Konva.js. Allows users to interactively draw polygons, measure side lengths, calculate areas, and handle scaled dimensions.
-
Interactive Polygon Drawing:
- Draw polygons by clicking to add points.
- Automatic polygon closure on clicking near the first point.
-
Real-time Dimensioning & Area Calculation:
- Displays side lengths dynamically on the canvas.
- Calculates and displays polygon area.
-
Customizable Scale:
- Adjust scale easily (e.g.,
1:10). - Dimensions and area adjust automatically.
- Adjust scale easily (e.g.,
-
Save and Load:
- Save your sketches as downloadable JSON files.
- Reload sketches easily from saved files.
-
Intuitive UI:
- Modern, clean user interface.
- Responsive toolbar with clear controls.
| Polygon Drawing | Area & Dimensions |
|---|---|
 |
 |
- HTML5 & CSS3
- JavaScript
- Konva.js (Canvas interaction)
Clone or download this repository:
git clone https://github.com/Nuraj250/polygon-project.gitSimply open index.html in your web browser:
polygon-project/
├── index.html
├── style.css
└── script.js- Click on the canvas to add polygon points.
- Click close to the first point to finish the polygon.
- Adjust scale using the input at the top toolbar.
- Save/load your sketch using provided toolbar buttons.
polygon-project/
├── index.html # Main HTML file
├── style.css # UI styling
├── script.js # Core logic and functionality
└── README.md # Project Documentation
- ✔️ Draw polygon by connecting lines
- ✔️ Display dimensions and polygon area
- ✔️ Enter custom scale to update measurements
- ✔️ Save and load sketches seamlessly
- Nuraj Shaminda