What component for an image with user-specified field overlays

We are using Vaadin 7.1 and are looking to create – or better yet just use! – a component that allows a user to specify field overlay positions on top of an image.

What approach would people consider for this?

The idea is the user will upload an image of a document page. Then using their mouse, they’d specify the size of the form’s input fields by dragging/drawing a rectangle that represents that field’s space on the form. Using the coordinates & size of where they drew it, we’d then use CSS to position INPUT (for user data entry) or SPAN tags (for display) so they occupy the locations of those coordinates.

If possible, we’d like the drawn rectangles to also be draggable and resizable to aid in positioning.

Any tips of ideas or even other tools that maybe a better starting point are much appreciated. Thanks!

Another way to look at this is, is there a component that allows me to draw simple shapes on a canvas (with the image shown in that canvas for location reference) so that they become objects that can be dragged and resized? As mentioned, I only need rectangles for now.

Two ideas that come to my mind depending on what exactly you need:
DragDropLayouts add-on
that is used by the visual editor (with AbsoluteLayout) if you need to move components around or
ProcessingJs add-on
if you want to draw shapes etc.