I need to draw a composition of images in a website. I have a background image and another image to be placed on top. The image on top is smaller and can be freely distorted. Then the user decides where to place it manipulating the corner points. I have already found this question for canvas that it should be my final point but I don't want the wireframe and when I tried to remove it, it has artifacts. I thought about using an SVG instead of a canvas and so I found this answer but it is for paths and not image tags and I do not know how to adapt it (if it is adaptable). Consider that my potential SVG will be very simple:

<svg>
  <image width="100%" height="100%" xlink:href="url_background_image" >
  <image xlink:href="url_image_to_distort" >
  <circle [attrs for top left]></circle>
  <circle [attrs for top right]></circle>
  <circle [attrs for bottom right]></circle>
  <circle [attrs for bottom left]></circle>
</svg>

I am a little confused even if it is possible to do it. My first choice would be to use the SVG but if it is not possible I would do it with the canvas. Does anyone know how I could do it?