<!-- Add the imagedraw script to your page -->
<script src="path/to/imagedraw.min.js"></script>

<!-- Your image needs an ID -->
<img id="floor-plan" src="/images/floor-plan.jpg" alt="A floor plan of an office.">

<!-- A place to display our coordinates -->
<pre id="coords-output"></pre>

document.addEventListener('DOMContentLoaded', () => {
  const outputElement = document.getElementById('coords-output');

  // Initialize imagedraw on our target image
  const drawer = new ImageDraw('#floor-plan', {
    // This function runs every time you finish drawing a shape
    onUpdate: (coords, shapeType) => {
      console.log(`Shape drawn: ${shapeType}`);
      console.log('Coordinates:', coords);

      // Display the coordinates beautifully formatted as a JSON string
      outputElement.textContent = JSON.stringify(coords, null, 2);
    }
  });
});

While the default behavior is great for rectangles, imagedraw() offers the flexibility to handle more complex scenarios.

Drawing Rectangles: The Basics

This is the default mode. You click, drag, and release. The coordinate output for a rectangle is typically an array in the format [x1, y1, x2, y2], representing the top-left and bottom-right corners.

// Example output for a rectangle
[
  150, // x1
  100, // y1
  450, // x2
  300  // y2
]

Defining Complex Polygons

What if you need to trace a non-rectangular area, like a specific room on a floor plan or a country on a map? You can switch the shape type to 'polygon'. In this mode, each click adds a new vertex. To complete the shape, you simply double-click.

// Initialize in polygon mode
const drawer = new ImageDraw('#floor-plan', {
  shape: 'polygon',
  onUpdate: (coords) => {
    // ... handle coordinates
  }
});

The output for a polygon is an array of points, where each point is an [x, y] pair. This format is perfect for use with HTML image maps or CSS’s clip-path property.

// Example output for a polygon
[
  [210, 150],
  [400, 180],
  [380, 350],
  [190, 320]
]

Customizing the Output Format

Sometimes a plain array isn't what you need. The library allows you to define a custom output format using a simple formatter function. Let’s say you need an object with named keys instead of an array.

const drawer = new ImageDraw('#floor-plan', {
  // Using the 'rectangle' shape type
  outputFormatter: (coords) => {
    // The default 'coords' is [x1, y1, x2, y2]
    return {
      topLeft: { x: coords[0], y: coords[1] },
      bottomRight: { x: coords[2], y: coords[3] },
      width: coords[2] - coords[0],
      height: coords[3] - coords[1]
    };
  },
  onUpdate: (formattedCoords) => {
    console.log(formattedCoords);
  }
});

Now, your callback receives a much more descriptive object, ready to be used in your application logic.

Real-World Use Cases

This tool isn’t just a novelty; it’s a practical solution for many common development tasks.

Interactive Image Maps

The classic <map> and <area> tags are powerful but notoriously difficult to create by hand. Use imagedraw() to visually define your 'hotspots' and generate the coords attribute for each area tag in seconds.

Machine Learning ROIs

When training a computer vision model, you often need to define a Region of Interest (ROI) where the model should focus. You can use this helper to quickly build a simple internal tool for your data science team to define and export these ROIs for training datasets.

Building Internal Annotation Tools

Need to build a quick tool for your content team to tag products in an image? Integrate imagedraw() to let them draw a box around a product, then pop up a modal asking for the product's name or ID. The coordinates are already handled.

Why Not Just Use Photoshop?

Graphics editors are powerful, but they aren't integrated into your workflow. The key benefit of imagedraw() is its immediacy and context. You are defining coordinates on the exact element in the exact state it will be in your application. This eliminates discrepancies caused by image scaling, CSS transforms, or responsive layouts. It’s a development tool, not a design tool, and that distinction is what makes it so efficient.

Conclusion: Draw, Don't Guess

The imagedraw() helper is a perfect example of a tool that does one thing exceptionally well. It removes a common, frustrating bottleneck in web development and data-related tasks. By allowing you to translate visual areas into precise, machine-readable data instantly, it frees you up to focus on the more complex parts of your project.

So next time you find yourself squinting at your screen, trying to guess a pixel’s location, remember there’s a better way. Give a tool like imagedraw() a try—your future self will thank you.