Dragging, resizing and rotating an image over layers in Openlayers3

Question

I would like to be able to drag, resize and rotate an image over layers on Openlayers3. The image has to be independent from layers. I tried rendering the image as a layer, using this:

var extent = map.getView().calculateExtent(map.getSize());

var imageLayer = new ol.layer.Image({opacity: 0.5});
var imageSource = new ol.source.ImageStatic({
    url: 'https://dummyimage.com/600x400/faf7fa/0011ff',
    imageExtent: extent
});

imageLayer.setSource(imageSource);
map.addLayer(imageLayer);

Unfortunately, I didn't find any clue about the possibility to drag an image layer over others layers.

Moreover, I do not want to load the image as a HTML element. I want it to be part of the OL canvas.

How can I achieve this?

Answer 1

I believe something like this can point you in right direction. It's not so flexible as you would like but it can help you a bit.