Tools

Create Polygon Shapes – Coordinates Arrays Json

The create a polygon tool is a tool for generating JSON arrays of coordinates by drawing polygon shapes on an image or canvas. This tool is particularly useful for developers and designers who need precise coordinates for defining clickable or interactive areas on images, such as image maps, custom shapes, or game development assets.

How to Use the Tool:

  1. Draw Polygon Shapes:
    • Click the button “Click to add more points” above the canvas to start plotting points of your polygon.
    • Continue clicking to add more points, forming the outline of your polygon.
    • Close the shape by creating 3 or more points.
  2. Adjust or Remove Points:
    • You can move points to adjust the shape or remove points as needed.
      • Click on a point and hold the mouse down to move the point. As long as the dot is enlarged you can use the arrow keys to move the point.
      • Hit the delete key while editing a point to remove it.
  3. View Generated JSON:
    • As you draw, the tool automatically generates a JSON array containing the x and y coordinates of each vertex in the polygon.
    • This JSON array is displayed on the page, making it easy to copy for your project.
  4. Copy JSON Data:
    • Copy the generated JSON to use in your code or project, allowing you to recreate or interact with the shape programmatically.

This tool simplifies the process of creating polygon shapes and obtaining precise coordinate data, making it especially handy for interactive web projects, games, or detailed image maps.

To top