JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Source Canvas</h1>
<canvas id="source" width=436 height=567></canvas>
<h1>Destination Canvas</h1>
 <canvas id="destination" width=436 height=567></canvas>

CSS

body {
    background-color: white;
}
canvas {
    border:1px solid red;
}

JavaScript

var sourceImage, ctx, sourceCanvas, destinationCanvas;
    
        //get the canvases
        sourceCanvas = document.getElementById('source');
        destinationCanvas = document.getElementById('destination');

    
    
    //draw the source image to the source canvas
    ctx = sourceCanvas.getContext('2d');
    
     function start() {

                ctx.drawImage(img1, 0, 0);

                ctx.globalCompositeOperation = "source-atop";

                var pattern = ctx.createPattern(img, 'repeat');
                ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
                ctx.fillStyle = pattern;
                ctx.fill();

                ctx.globalAlpha = .10;
                ctx.drawImage(img1, 0, 0);
                ctx.drawImage(img1, 0, 0);
                ctx.drawImage(img1, 0, 0);
                 //ctx.globalAlpha = 1;
            }
     var img1 = new Image();
     var img = new Image();
    img.onload = function () {

              img1.onload = function () {
                  start();
              }
img1.src = "http://localhost:9090/Servidor/app/descarga/image";
}
img.src = "https://www.gravatar.com/avatar/917abd6048213a10a381471a03d0891b?s=328&d=identicon&r=PG";