JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="backgroundImageInput" accept="image/*">
<canvas id="canvas" width="400" height="300"></canvas>
<button id="downloadBtn" style="display: none;">Stáhnout image3</button>

JavaScript

function drawOverlayedImage(backgroundImage, overlayImage) {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        
        ctx.drawImage(backgroundImage, 0, 0);
        ctx.drawImage(overlayImage, 0, 0);
        
        document.getElementById('downloadBtn').style.display = 'block';
    }
    
    
    function downloadImage() {
        const canvas = document.getElementById('canvas');
        const image = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        // Correct here
        link.download = 'image3.png';        
        link.href = image;
        link.click();
    }
    
    
    document.getElementById('backgroundImageInput').addEventListener('change', function(event) {
        const backgroundImageFile = event.target.files[0];
        if (backgroundImageFile) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const backgroundImage = new Image();
                backgroundImage.src = e.target.result;
                
                const overlayImage = new Image();
                // Hack here to avoid loading a second image as overlay
                // overlayImage.src = 'image2.png';
                overlayImage.src = e.target.result;
                
                overlayImage.onload = function() {
                    drawOverlayedImage(backgroundImage, overlayImage);
                };
            }
            reader.readAsDataURL(backgroundImageFile);
        }
    });
    
    
    document.getElementById('downloadBtn').addEventListener('click', downloadImage);