How to overlay an image on another?

Question

JavaScript

So that when the screen changes, the size of the pictures and the position relative to the main picture change. For example, there is a main picture of a house, and I need to overlay this picture with a separate image of a roof, a separate image of a pipe, a separate image of a wall.

Can this be done with canvas, does it work on mobile?

$('canvas').addLayer({
  type: 'rectangle',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
})

$('canvas').addLayer({
  type: 'image',
  draggable: true,
  source: 'https://resizer.mail.ru/p/34456aa4-2cf6-5677-949e-f9b5bd483f07/AAAGvFtN1ZYXYar4VT-yRURmYoGxe1K2OpXDLApY4eHXLyr24j2QJzor6UAxZAn2S0rVv_rOVNLxTUZq6BXki8P101I.jpg',
  
})
.drawLayer();

- Something is not working for me.

Or it’s stupid to calculate, based on the proportion of the main picture, and the superimposed parts (roof, house, wall), the position relative to the canvas (canvas is the main picture) and apply z-index for each screen size ( like here )