Is it possible to control the canvas image (pattern)?

Question

Canvas

Here's an example. jsfiddle.net/kw4aqpz1/2
There is a png with a transparent layer. It needs to be filled with another image.
I did it on regular divs with resize, drag, z-index, etc. But it worked out well.
So I decided to see what canvas. It turned out to fill in, but can it be controlled? I understand that rather no - it's a "fill". But maybe there is another way to combine 2 images in such a way that the overlay image can be resized, zoomed in, generally adjusted.

Answer 1

CanvasPattern can be resized, rotated and moved using setTransform
Upd: In general, I googled another option: first you initiate the shape you want to fill, and then you move it through translate. I suspect that rotate and scale would also work.

ctx.fillStyle = somePattern;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 180);

ctx.save();
ctx.translate(offset, offset);
ctx.stroke();
ctx.restore();