When I apply the image to the canvas, it gets rotated and pasted on the mesh in the model

When I apply a texture uploaded using fabric canvas to the model, the texture gets rotated and applied.

1. [intial model] (https://i.sstatic.net/4avgVUGL.png)
2. after upload of picture and application

upside down application

function applyTextureToModel() {
    const canvas1 = canvas.lowerCanvasEl;
    const texture = new THREE.CanvasTexture(canvas1);

    // Set texture parameters
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    

    // Apply the texture to the model's material
    if (model) {
        // Traverse the model to find the mesh named "heel"
        model.traverse((child) => {
            if (child.isMesh && child.name === 'heel_quarter_side2') {
                child.material.map = texture;
                child.material.needsUpdate = true;
                console.log('Texture applied to the mesh named "heel"');
            }
        });
    } else {
        console.log('Model is not loaded yet');
    }
}

When using GLTFLoader you have to set flipY to false.

child.material.map = texture;
child.material.map.flipY = false;

More on that in GLTFLoader documentation - https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader