Google Fonts Icon Downloader And Viewer

async function processImage(originalImg, iconName = "home", iconSize = 512, iconColor = "#000000", iconStyle = "Outlined") {
    // Sanitize parameters
    iconSize = Number(iconSize) || 512;
    iconName = String(iconName).toLowerCase().trim().replace(/ /g, '_');
    
    // Validate Google Material Symbols style (Outlined, Rounded, or Sharp)
    const validStyles = ["Outlined", "Rounded", "Sharp"];
    const style = validStyles.includes(iconStyle) ? iconStyle : "Outlined";
    const familyName = `Material Symbols ${style}`;
    const cssFamilyName = familyName.replace(/ /g, '+');
    
    const fontUrl = `https://fonts.googleapis.com/css2?family=${cssFamilyName}&display=block`;

    // Dynamically inject the Google Fonts CSS if not already present
    if (!document.querySelector(`link[href="${fontUrl}"]`)) {
        const link = document.createElement("link");
        link.href = fontUrl;
        link.rel = "stylesheet";
        document.head.appendChild(link);
    }

    // Create a hidden element to trigger actual browser font load for the ligature
    const testSpan = document.createElement("span");
    testSpan.style.fontFamily = `"${familyName}"`;
    testSpan.style.fontSize = "50px";
    testSpan.style.position = "absolute";
    testSpan.style.visibility = "hidden";
    testSpan.textContent = iconName;
    document.documentElement.appendChild(testSpan);

    // Prompt document.fonts to eagerly resolve
    try {
        await document.fonts.load(`50px "${familyName}"`);
    } catch (e) {
        console.error("Font loading error:", e);
    }

    // Short wait to allow ligature format and rendering logic to properly catch up
    await new Promise(resolve => setTimeout(resolve, 250));

    // Setup the Canvas
    const canvas = document.createElement('canvas');
    canvas.width = iconSize;
    canvas.height = iconSize;
    const ctx = canvas.getContext('2d');

    // Ligature fallback measurement retry check:
    // If text width is wildly broader than an icon should be, it has likely rendered as literal text characters. 
    // E.g., 'home' takes 4 chars of space instead of 1 symbol.
    let retries = 0;
    ctx.font = `${iconSize}px "${familyName}"`;
    let met = ctx.measureText(iconName);
    
    while (met.width > iconSize * 1.5 && retries < 10 && iconName.length > 2) {
        await new Promise(resolve => setTimeout(resolve, 150));
        ctx.font = `${iconSize}px "${familyName}"`;
        met = ctx.measureText(iconName);
        retries++;
    }

    // Clear transparent background
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Set standard styles and alignments
    ctx.fillStyle = String(iconColor);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Draw perfectly centered in the bounding box
    ctx.fillText(iconName, iconSize / 2, iconSize / 2);

    // Clean up temporary DOM element
    document.documentElement.removeChild(testSpan);

    return canvas;
}