HTML + JS, overlay an uploaded image onto a canvas

Sorry if this is a duplicate I'm new to JS and HTML and I can't figure out what else to do.

I am trying to make (mostly from JS) a way to upload images onto any background you like, then saving them as one image. For now, I am experimenting by putting an image of the scream onto a canvas and then trying to upload an image of my choosing. Currently when I press save image, it saves ONLY the background. Also the background and uploaded image both overflow out of the card, but removing position:absolute in css stops them from overlaying. I've tried stuff with MarvinJ or even just trying to not use canvas, but can't get it to work.

Sorry for the big question, how do I merge an uploaded image and an image of my choosing onto a card and save them as one file?

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type = "text/css" href="blank.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title> Petra image </title>
</head>
<body>
<div class = "wrap">
    <div class = "card-container">
        <input type="file" onchange="previewFile()"><br>
        <img src="" height="200" class = "Card_Image" alt="Image preview...">   
        </div>
        <div class="card_main">
            <div id="picHolder">        
                <img src="" id = "pic" class = "test" height="300" alt="Image preview2" object-fit: cover;>
                <img id="scream" class = "scream" width="300" height="480" src="img_the_scream.jpg" alt="The Scream" object-fit: cover;>
            </div>
        </div>
    </div>
</div>
<script src="blank.js"></script>
</body>

CSS:

html, body {
  margin: 0;
  width:100%;
  padding:0;
}
.wrap {
  display: flex;
  flex-direction: column;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.card_main {
  width: 300px;
  height: 420px;
  margin: 12px;
  background-color: rgb(0, 0, 0);
  padding: 10px;
  overflow: hidden;
}

.scream{
  position: absolute;
opacity: 0.2;
  border: 1px solid #000000;
  z-index: 1;
}

Javascript:

function previewFile() {
  var preview = document.querySelector('img');
  var preview2 = document.querySelector('.test')
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
    preview2.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("pic");
  var img2 = document.getElementById("scream2");
  ctx.drawImage(img, 10, 10);
  ctx.globalAlpha = 0.5;
  ctx.drawImage(img2, 10, 10);
}