Javascript shapes and coordinants

Yes, there are several JavaScript libraries available that can help you draw shapes on an image and extract the coordinates of those shapes. One popular library is Fabric.js.

Here's an example of how you can use Fabric.js to draw shapes on an image and extract their coordinates:

// Create a canvas element
var canvas = new fabric.Canvas('canvas');

// Load the image onto the canvas
fabric.Image.fromURL('path/to/image.jpg', function(img) {
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});

// Create a rectangle shape
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  fill: 'red'
});

// Add the rectangle to the canvas
canvas.add(rect);

// Get the coordinates of the rectangle
var rectCoords = rect.getBoundingRect();

console.log(rectCoords);

In this example, we first create a canvas element using Fabric.js. We then load an image onto the canvas using the fabric.Image.fromURL method. Next, we create a rectangle shape with specific coordinates and add it to the canvas. Finally, we use the getBoundingRect method to extract the coordinates of the rectangle.

You can use similar methods to draw other shapes like circles, polygons, etc., and extract their coordinates as needed.