JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=500 height=400></canvas>

CSS

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

JavaScript

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

var img1 = new Image();
var img = new Image();
img.onload = function () {

    img1.onload = function () {
        start();
    }
    img1.src = "https://i.ibb.co/JnTcLFY/22672b077ea52ae5b8bd35f366bafd00.png";
}
img.src = "https://million-wallpapers.ru/wallpapers/4/58/14475804657355694385.jpg";



function start() {

    ctx.drawImage(img1, 0, 0, canvas.width, canvas.height);

    ctx.globalCompositeOperation = "destination-atop";

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


}