How to add fabric js texture on top of svg texture threejs

So i’m trying to add new images and text as texture of 3d object using fabric js to my 3d configurator im using this code as codebase GitHub - devramkumardnagarajan/3d-Tshirt-design: Design Tshirt's using Three.js and this code for the fabric js https://codepen.io/ricardcreagia/pen/EdEGod, here’s what i did

var texture = new THREE.Texture(document.getElementById("canvas"));

here’s how i load the svg

function set_materials(response) {

    var baseSvg = document.getElementById("svgContainer").querySelector("svg");
    var baseSvgData = (new XMLSerializer()).serializeToString(baseSvg);

    $('#svgPathContainer').empty();
    $('#svgTextContainer').empty();
    $('#svgPathContainer').append(baseSvgData).html();
    $('#svgTextContainer').append(baseSvgData).html();
    var texts = $('#svgPathContainer text');
    for (var i = 0; i < texts.length; i++) {
        $(texts[i]).remove();
    }
    var paths = $('#svgTextContainer path');
    for (var i = 0; i < paths.length; i++) {
        $(paths[i]).remove();
    }
    var svg = document.getElementById("svgPathContainer").querySelector("svg");
    var svgData = (new XMLSerializer()).serializeToString(svg);
    canvas.width = $(svg).width();
    canvas.height = $(svg).height();
    var ctx = canvas.getContext("2d");
    var img = document.createElement("img");
    var material;
    img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))));

    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        var oImg = document.createElement("img");
        oImg.width = "100px";
        oImg.height = "100px";
        oImg.setAttribute("src", 'assets/' + gender + '/cat' + category + '/texture.png');
        oImg.onload = function () {
            ctx.globalAlpha = 0.4;
            ctx.scale(0.3, 0.3);
            var pattern = ctx.createPattern(oImg, 'repeat');
            ctx.fillStyle = pattern;
            ctx.fillRect(0, 0, canvas.width * 3.33, canvas.height * 3.33);
            ctx.globalAlpha = 1;
            ctx.scale(3.33, 3.33);
            var svgText = document.getElementById("svgTextContainer").querySelector("svg");
            var svgTextData = (new XMLSerializer()).serializeToString(svgText);
            var imgT = document.createElement("img");
            imgT.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgTextData))));
            imgT.onload = function () {
                ctx.drawImage(imgT, 0, 0);
                texture.needsUpdate = true;
                map = texture;
                textureMaterial = new THREE.MeshPhongMaterial({ map: map });
                load_materials();
                load_styles();
                response(true);
            }
        }
    };
}

i map the texture to textureMaterial and here’s what i got

enter image description here

it doesn’t map the UV properly, anyone have any idea how to fix it?