Hello everyone I had this project for my company that makes Eid cards and the program takes an image write a text in it and then download it. when i am using browser in my computer it works fine but when I use it in my mobile it download it in .txt format

document.getElementById('downloadButton').addEventListener('click', function() {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const cardImage = document.getElementById('greetingCard');
    
    canvas.width = cardImage.naturalWidth;
    canvas.height = cardImage.naturalHeight;
    
    context.drawImage(cardImage, 0, 0);
    
    const nameDisplay = document.getElementById('nameDisplay');
    const computedStyle = window.getComputedStyle(nameDisplay);
    const fontSize = parseFloat(computedStyle.fontSize);
    const scalingFactor = 9.5; // Increased scaling factor for much bigger text
    const scaledFontSize = fontSize * scalingFactor;
    
    context.font = `${scaledFontSize}px 'Neo Sans Arabic', sans-serif`;
    context.fillStyle = computedStyle.color;
    context.textAlign = 'center';
    
    const topPercentage = parseFloat(nameDisplay.style.top) / 100;
    const leftPercentage = parseFloat(nameDisplay.style.left) / 100;
    context.fillText(nameDisplay.textContent, canvas.width * leftPercentage, canvas.height * topPercentage);

    canvas.toBlob(function(blob) {
        const link = document.createElement('a');
        link.download = 'Eid_Greeting_Card.png';
        link.href = URL.createObjectURL(blob);
        link.click();
        URL.revokeObjectURL(link.href);  // Clean up after the download
    }, 'image/png');

});