Я ищу решение, чтобы изменить текстуру / рисунок для продукта.

На данный момент у меня есть:

.Png изображение дивана с прозрачным фоном.Png изображение текстуры

Со следующим кодом:

<canvas id="a" width="800" height="500">Canvas not supported on your browser</canvas>

var width = $(window).width();
var height = $(window).height();

var c = document.getElementById("a");
var ctx = c.getContext("2d");

var can2 = document.createElement('canvas');
document.body.appendChild(can2)

can2.width = c.width;
can2.height = c.height;
var ctx2 = can2.getContext("2d");


var test = new Image();
test.src = "Images/newBank.png";
test.onload = function () {
    ctx2.drawImage(test, 0, 0);
};

var img = new Image();
img.src = "Images/texturetrans.png";
img.onload = function () {
    ctx2.globalCompositeOperation = 'source-in';
    var ptrn = ctx2.createPattern(img, 'repeat');
    ctx2.fillStyle = ptrn;
    ctx2.fillRect(0, 0, can2.width, can2.height);
}

`

Я получаю этот результат:

Как видите, весь объект заполнен моей текстурой. Определения подушек и т. Д. Больше не видны. Можно ли позволить моей текстуре быть своего рода прозрачной маской?

Я уже в состоянии изменить цвет дивана:

Но я хотел бы иметь возможность добавить рисунок на моем диване!

Буду признателен за любую помощь, и я уже очень сожалею о моем плохом английском.