Поместите загруженное изображение на обложку (рамку) и нарисуйте оба изображения на холсте, чтобы загрузить его.

Question

Мои логики c: загруженное изображение устанавливается как фоновое изображение div, и внутри этого div я добавил изображение рамки (обложки), чтобы оно выглядело так: .Красная граница и заголовок - это рамка с невидимым центром, и внутри нее есть загруженное изображение. ПРОБЛЕМА заключается в том, что я не могу нарисовать оба изображения на холсте, чтобы потом его загрузить. (На холсте рисуется только одно изображение). Любая помощь будет принята с благодарностью.

2-й запрос (без приоритета): было бы идеально, если бы мы могли перетащить только внутреннее изображение, чтобы настроить его, используя функцию перетаскивания jQuery или что-то еще.

Спасибо:)

 // Uploading image
        var loadFile = function(event) {
            var image = document.getElementById('output');
            //image.src = URL.createObjectURL(event.target.files[0]);
            var src = URL.createObjectURL(event.target.files[0]);
            $('#output').css('background-image', 'url(' + src + ')');
        };
        
        
function drawCollagOnCanvas() {

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

            var imgWidth = $("#output").width();
            var imgHeight = $("#output").height();
            canvas.width = parseInt(imgWidth) + 10;
            canvas.height = parseInt(imgHeight) + 10;

            var cw = canvas.width;
            var ch = canvas.height;

            // Setting background image

            // get the dataURL of your div's background
            var bg = $('#output').css('background-image');
            bg = bg.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');
            // build an image from the dataURL
            var img = new Image();
            img.width = imgWidth;
            img.height = imgHeight;
            //img.crossOrigin='anonymous';
            img.onload = function() {
                // draw the image onto the canvas
                ctx.drawImage(img, 0, 0, img.width, img.height);
            }
            img.src = bg;

            // Setting cover image

            // get the dataURL of your div's background
            var bg2 = $('.cover-img').attr('src');
            bg2 = bg2.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');
            // build an image from the dataURL
            var img2 = new Image();
            img2.width = imgWidth;
            img2.height = imgHeight;
            //img.crossOrigin='anonymous';
            // draw the image onto the canvas
            ctx.drawImage(img2, 0, 0, img2.width, img2.height);
            img2.src = bg2;
        }

.cover-img {
    display: block;
    width: 100%;
    height: auto;
    top: 0%;
    z-index: 10;
}

#output {
    width: 80%;
    background-size: 100% 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    background-repeat: no-repeat;
}

 <div class="img-section">
                <div class="overlapping-img" id="output">
                    <img class="cover-img" style="z-index: 20;" src="static/images/backgroundcover.PNG">
                </div>
</div>