Merge/Combine overlapped portion of canvas using Javascript

Question

I am trying to merge/combine overlapped portion of canvas with the rest of canvas portion. For that, I am dragging and dropping images on canvas with transparent background. I placed images in such way that their common parts overlapped. Now, I need to merge the the overlapped part so that it must look single image and it must look similar to other parts of the images. I have tried blending technique given in below link but failed to get desire output.

blend two images on a javascript canvas

I am using a button to merge overlapped portion of canvas.

<button id="applyPanoBtn">Merge</button>

Here is my click event in JavaScript.

applyPanoBtn?.addEventListener("click", function () {
    var bCanvas = document.getElementById("panoramaCanvas");
    var bCtx = bCanvas.getContext("2d");
    var bData = bCtx.getImageData(0, 0, bCanvas.width, bCanvas.height);
    var data = bData.data;
   
    // Increasing opacity of image
    for (let i = 0; i < data.length; i = i + 4) {
        data[i + 3] = 255;
    }

    var pixels = 4 * bCanvas.width * bCanvas.height;  

    while (pixels--) {
        data[pixels] = data[pixels] * 0.5 + data[pixels] * 0.5;
    }
    // Blending technique
    bData.data = data;
    bCtx.putImageData(bData, 0, 0);
});

Here is my image sources and output:

As you can look in the output image, the overlapped portion is looking different then rest of the canvas portion and it looks like separate part of image. I tried to combine/merge the overlapped part with rest of the image so that it looks like single image but I am not getting proper results.

Is there any algorithm or any thing else by which I can achieve that output?