In my project, I need a way to interactively draw multiple bounding boxes in an image when displayed inside a web browser. When the bounding boxes are drawn, I need to read out their coordinates. Can somebody propose a javascript library that can handle this task? I have no experience with frontend technologies like React or Angular and only have experiences with plain javascript.

CodePudding user response：

This answer tells you how to draw boxes: https://stackoverflow.com/a/65376701/6469130

Either:

• you should have the image drawn to the overlay canvas or
• you should have an image element beneath the canvas as in this answer

What you need to add is storing the coordinates in handleMouseUp(). Logging example:

console.log(prevStartX, prevStartY, prevWidth, prevHeight);