I'd like to quickly prototype an app. It would be a single web page that gets an image and some (x,y) coordinates via http. It renders the image, and then draws red dots on the image at certain (x, y) coordinates on the image. I would will also be drawing line segments between some of the dots.

What I'm looking to do is to have a user be able to grab a dot, and move it to another (x, y) position on the image. And then i'd be able to send the udpated x,y coordinates to a backend service. The images are pngs.

If there's any framework or HTML5/CSS3 functionality that can do this sort of thing easily, I'd be open to that. I have some experience with React/Vue/jQuery and am ok with vanilla javascript.

I'm comfortable with the http calls, more interested in an easy frontend technology that allow you to drag and drop points and access the x,y coordinates of those points on an image.

  • without any extras, browsers send the x/y coord of the click point as a POST parameter when submitting a plain HTML form that uses a image as the submit button (think imagemaps made super easy). don't know if those pass through to various javascript functions though... think onMouseDown/Up might, but it has been forever since i've done serious JS work – ivanivan Aug 30 at 0:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.