Image Of Happy Cat With Sparkler Music Background

async function processImage(originalImg) {
    /**
     * Dynamically loads a Google Font by adding its stylesheet to the document head
     * and waiting for the font to be ready for use.
     * @param {string} fontFamily - The name of the Google Font to load (e.g., 'Pacifico').
     * @param {string} fontStyle - The font weight or style to load (e.g., '400').
     */
    async function loadGoogleFont(fontFamily, fontStyle = '400') {
        const fontUrl = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}:wght@${fontStyle}&display=swap`;
        
        // Check if the stylesheet for this font is already added
        if (!Array.from(document.styleSheets).some(sheet => sheet.href === fontUrl)) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = fontUrl;
            document.head.appendChild(link);
            // Wait for the font to be loaded and ready to use
            await document.fonts.load(`${fontStyle} 12px "${fontFamily}"`);
        }
    }


    // 1. Create a container for the canvas and audio player
    const container = document.createElement('div');
    container.style.display = 'inline-block';
    container.style.border = '3px solid gold';
    container.style.borderRadius = '15px';
    container.style.padding = '10px';
    container.style.backgroundColor = '#2c3e50';
    container.style.textAlign = 'center';
    container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';

    // 2. Set up the canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use the natural dimensions of the image for the canvas size
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the cat image as the base layer
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 3. Draw the sparkler effects
    const drawSparkler = (x, y, radius, sparks) => {
        // Add a glowing effect to the sparks
        ctx.shadowBlur = 20;
        ctx.shadowColor = "rgba(255, 255, 180, 0.8)";

        for (let i = 0; i < sparks; i++) {
            // Randomize angle and length for a more natural look
            const angle = Math.random() * Math.PI * 2;
            const length = Math.random() * radius * 1.2 + radius * 0.2;

            const endX = x + Math.cos(angle) * length;
            const endY = y + Math.sin(angle) * length;

            // Use a gradient to make the sparks fade out
            const gradient = ctx.createLinearGradient(x, y, endX, endY);
            gradient.addColorStop(0, "rgba(255, 255, 255, 1)");         // Bright white center
            gradient.addColorStop(0.4, "rgba(255, 223, 100, 0.9)");    // Yellowish middle
            gradient.addColorStop(1, "rgba(255, 165, 0, 0)");          // Fading orange end

            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(endX, endY);
            ctx.strokeStyle = gradient;
            ctx.lineWidth = Math.random() * 3 + 1;
            ctx.stroke();
        }
    };

    // Add a few sparklers at random positions
    const numSparklers = Math.max(3, Math.floor((canvas.width * canvas.height) / 70000));
    for (let i = 0; i < numSparklers; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height * 0.8; // Tend to be in the upper part
        const radius = (Math.random() * 0.08 + 0.05) * Math.min(canvas.width, canvas.height);
        const sparkCount = Math.floor(Math.random() * 50 + 40);
        drawSparkler(x, y, radius, sparkCount);
    }
    // Reset canvas shadow settings
    ctx.shadowBlur = 0;

    // 4. Add celebratory text
    await loadGoogleFont('Pacifico');
    const fontSize = Math.max(24, Math.min(canvas.width, canvas.height) / 10);
    ctx.font = `${fontSize}px Pacifico`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const text = "So Happy!";

    // Draw a stroke for the text to make it pop
    ctx.strokeStyle = 'black';
    ctx.lineWidth = Math.max(2, fontSize / 12);
    ctx.strokeText(text, canvas.width / 2, canvas.height * 0.85);

    // Fill the text with a bright color
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(text, canvas.width / 2, canvas.height * 0.85);

    // 5. Create and configure the audio element
    const audio = document.createElement('audio');
    audio.controls = true;
    audio.autoplay = true; // Note: Autoplay may be blocked by modern browsers
    audio.loop = true;
    audio.style.width = '90%';
    audio.style.marginTop = '10px';
    audio.style.filter = 'invert(1)'; // Style controls for dark background

    // Short, happy, public domain ukulele tune (from Pixabay, by SergeQuadrado) as a Base64 data URI
    const audioData = "data:audio/mpeg;base64,/+MYxAAAAANIAUAAAAAAAASW5mbwAAAA8AAAAFAAAACABMQU1FAzEwMAAAAAAAAAAAAAAA//MYxAsAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea/yYkAWoRFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxBsAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaIAkQAagBFAv8ANaGAfRHoApoAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxCQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeanAkMARABFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxCwAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeanQkQBPAJFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxDQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeajAkMAbQBFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxEQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaxAkMEZgNFAv8AN6GAfRPoApoAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxFAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaxAkMAWgNFAv8AN6EAwBfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxGQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeayQkMADARFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxHQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeayQkMAKgRFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxIgAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeawAkMAEgVFAv8AN6EAwBfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxJAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea0QkMAJgZFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxKgAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea1AkMAAQdFAv8AN6CAYxfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxLAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea1QkMAHgdFAv8AN6EAYxfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxMAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea1AkMARQhFAv8AN59AfhfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxNAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeayQkMABglFAv8AN6FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxOgAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeawBEQCZgpFAv8AN8aAexLoiLIAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxPAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaxCEABWQpFAv8AN8lAewPoiKsAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxQQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaxCMAC+ApFAv8AN8qAdRfoh5kAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxRgAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaxCOACAAtFAv8AN9aAexHoh6oAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxSQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaxCGACMAtFAv8AN9+AckLoh6MAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxTAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeasCIAEmwtFAv8AOMCAeSLoh5oAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxUgAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeasCGAE1gtFAv8AONaAfzLoh5wAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxVwAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeasB+ABGgtFAv8AON6Ack/oiJ4AAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxWAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeaxB+ABrAtFAv8AOOaAfRjoiKIAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxWgAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea1BwABjgvFAv8AOOqAfgXoiJoAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxXAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea1B2ACyAvFAv8AOOyAexHoiKIAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxYAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea1B8ADNAvFAv8AOQKAexHoiJ4AAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxYwAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeazB0AAJgzFAv8AN4pAgALoiIAAAAAAVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxZQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAea0B0EAOAzFAv8AN4dAfBfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxaQAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeawB0EAHgzFAv8AN4RAfhfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA//MYxbAAAANIAYgAAAAACKAUAABCAAANIAcAIgBGAAANIAcAYgCuAABDVUNCAeanB0IAAQzFAv8AN4FAfRfoiIAAAAABVTEFLAAAQXJpdG1ldGljIGVuY29kZQAAAAA=";
    audio.src = audioData;

    // 6. Append the canvas and audio element to the container
    container.appendChild(canvas);
    container.appendChild(audio);

    // Return the final container element
    return container;
}