javascript - Drag an image on another image and save it to one image (like light augmented reality) -

i´m wondering how can realize this? want have bigger image in background , able drag , drop smaller image position want on bigger image , save finally, becomes one.

is possible javascript & html5?

appreciate ideas!

thanks

yes, when have images in position:

• create canvas element size of background image
• draw background image it
• iterate through images , record positions
• draw each image using canvas' context.drawimage(image, posx, posy) recorded
• extract final image canvas using canvas.todataurl()

the data url can set src on background image or can upload directly server etc. setting image allow right-click , use save as.

if use canvas "background" image (covering window) - initialize image want in background, continue point 3 above.