Overlay png on background

<div> 

<h2>Overlay a Transparent PNG on a JPG Background</h2>

    <div class="container">

        <!-- Image Preview Section -->

        <div class="preview">

            <label>Background Preview:</label>

            <img id="bgPreview" alt="Background Preview">

            <label>Overlay Preview:</label>

            <img id="overlayPreview"  alt="Overlay Preview">

        </div>

        <!-- Upload & Controls -->

        <div>

            <label>Upload Background (.jpg):</label>

            <input type="file" id="backgroundInput" accept="image/jpeg"><br>

            <label>Upload Overlay (.png):</label>

            <input type="file" id="overlayInput" accept="image/png"><br>

            <button onclick="mergeImages()">Merge Images</button>

            <button onclick="downloadImage()">Download JPG</button>

        </div>

    </div>

	 <canvas id="canvas"></canvas>

    <script>

        let bgImage = new Image();

        let overlayImage = new Image();

        let canvas = document.getElementById("canvas");

        let ctx = canvas.getContext("2d");

        function loadImage(input, imgElement, targetImage) {

            let file = input.files[0];

            if (file) {

                let reader = new FileReader();

                reader.onload = function(e) {

                    targetImage.src = e.target.result;

                    imgElement.src = e.target.result;

                };

                reader.readAsDataURL(file);

            }

        }

        document.getElementById("backgroundInput").addEventListener("change", function() {

            loadImage(this, document.getElementById("bgPreview"), bgImage);

        });

        document.getElementById("overlayInput").addEventListener("change", function() {

            loadImage(this, document.getElementById("overlayPreview"), overlayImage);

        });

        function mergeImages() {

            if (!bgImage.src || !overlayImage.src) {

                alert("Please upload both images!");

                return;

            }

            // Set canvas size to match background image

            canvas.width = bgImage.width;

            canvas.height = bgImage.height;

            // Draw background

            ctx.drawImage(bgImage, 0, 0);

            // Scale overlay to match background width while maintaining aspect ratio

            let scaledHeight = (overlayImage.height * bgImage.width) / overlayImage.width;

            ctx.drawImage(overlayImage, 0, (canvas.height - scaledHeight) / 2, bgImage.width, scaledHeight);

        }

        function downloadImage() {

            let link = document.createElement("a");

            link.download = "merged_image.jpg";

            link.href = canvas.toDataURL("image/jpeg", 1.0);

            link.click();

        }

    </script>

</div>