Как наложить картинку на другую?

Question

[Qwyu_4iLofK]

Чтобы при изменении экрана менялись размеры картинок и положение относительно главной картинки. Например, есть главная картинка дом, и мне нужно наложить на эту картинку отдельно картинку крышу, отдельно картинку трубу, отдельно картинку стена.

Это можно сделать с помощью канваса, это работает в мобиле?

$('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();

-у меня что-то не работает.

Или тупо считать, исходя из пропорции основной картинки, и накладываемых частей (крыша, дом, стена) положение относительно холста (холст- основная картинка) и применять z-index под каждые размеры экрана (как тут)

Comments

[Alex]

А зачем вам canvas?

[Qwyu_4iLofK]

Alex, возможно, я туплю, не понимаю преимущества канваса. Предположительно для того, чтобы менять картинки крыш на одном холсте. То есть, в случае наложения картинок не надо канвас?

И еще, при наведении на крышу, чтобы всплывало меню, в случае слоев, наверное, это не решить. Подумаю еще.