MacOS X Booting Image Effect Generator

function processImage(originalImg, theme = "modern", mode = "overlay", progress = "60") {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    // Retrieve image dimensions safely
    const w = originalImg.naturalWidth || originalImg.width || 800;
    const h = originalImg.naturalHeight || originalImg.height || 600;
    
    canvas.width = w;
    canvas.height = h;

    // Determine layout and layout properties
    const minDim = Math.min(w, h);
    const isModern = theme.toLowerCase() !== "classic";
    const isReplaceLogo = mode.toLowerCase() === "replace-logo";
    const progVal = Math.max(0, Math.min(100, parseFloat(progress) || 0));

    // Helper to draw clean rounded rectangles
    function drawRoundedRect(x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.arcTo(x + width, y, x + width, y + height, radius);
        ctx.arcTo(x + width, y + height, x, y + height, radius);
        ctx.arcTo(x, y + height, x, y, radius);
        ctx.arcTo(x, y, x + width, y, radius);
        ctx.closePath();
    }

    if (isReplaceLogo) {
        // 1. Image as Logo Layout
        ctx.fillStyle = isModern ? "#000000" : "#BFBFBF";
        ctx.fillRect(0, 0, w, h);

        let maxLogoSize = minDim * 0.35;
        let scale = Math.min(maxLogoSize / w, maxLogoSize / h);
        let drawW = w * scale;
        let drawH = h * scale;
        let yLogo = h * 0.42;

        ctx.save();
        // Setup Apple-like clipping squircle/rounded box for the image
        let cornerRadius = drawW * 0.15;
        drawRoundedRect(w / 2 - drawW / 2, yLogo - drawH / 2, drawW, drawH, cornerRadius);
        ctx.clip();
        ctx.drawImage(originalImg, w / 2 - drawW / 2, yLogo - drawH / 2, drawW, drawH);
        ctx.restore();

    } else {
        // 2. Fullscreen Overlay Layout
        ctx.save();
        // Blur and adjust exposure of the original image to make UI pop out
        if (isModern) {
            ctx.filter = 'blur(10px) brightness(0.6)';
        } else {
            ctx.filter = 'blur(10px) brightness(1.2) grayscale(0.2)';
        }
        ctx.drawImage(originalImg, 0, 0, w, h);
        ctx.restore();

        // Give a slight transparency tint
        ctx.fillStyle = isModern ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.3)";
        ctx.fillRect(0, 0, w, h);

        // Draw standard Apple Logo
        ctx.save();
        let maxLogoSize = minDim * 0.18;
        let yLogo = h * 0.42;
        ctx.translate(w / 2, yLogo);
        // The standard SVG has bounds roughly 160x180 width/height, centering accordingly
        let scale = maxLogoSize / 180;
        ctx.scale(scale, scale);
        ctx.translate(-85, -95);
        ctx.fillStyle = isModern ? "#FFFFFF" : "#333333";
        const applePath = new Path2D("M135.1 106.8c0-21.7 17.7-31.9 18.5-32.4c-10.1-14.8-25.8-16.7-31.5-16.9c-13.5-1.4-26.3 8-33.2 8 c-6.8 0-17.5-7.7-28.6-7.5C45 58.2 31.4 66.8 23.8 79.9C8.3 106.7 19.9 146.5 35.1 168.4c7.4 10.7 16.1 22.8 27.9 22.4 c11.3-0.5 15.6-7.4 29.3-7.4c13.7 0 17.6 7.4 29.5 7.2c12.1-0.2 19.6-11.1 26.9-21.8c8.4-12.3 11.9-24.2 12.1-24.8 C160.7 143.8 135.1 133.9 135.1 106.8z M107.5 38.3c6.2-7.5 10.4-18 9.3-28.3c-8.9 0.4-19.9 6-26.3 13.5c-5.7 6.6-10.7 17.3-9.4 27.4 C91 51.3 101.3 45.8 107.5 38.3z");
        ctx.fill(applePath);
        ctx.restore();
    }

    // Draw the boot progress bar geometry
    let barW = Math.min(w * 0.25, 300);
    let barH = isModern ? Math.max(minDim * 0.007, 4) : Math.max(minDim * 0.016, 12);
    let barX = w / 2 - barW / 2;
    let barY = h * 0.65; // Position relative to center

    if (isModern) {
        // Modern slim loading bar
        ctx.fillStyle = isReplaceLogo ? "#333333" : "rgba(255, 255, 255, 0.25)";
        drawRoundedRect(barX, barY, barW, barH, barH / 2);
        ctx.fill();

        let rawFillW = barW * (progVal / 100);
        if (rawFillW > 0) {
            let fillW = Math.max(rawFillW, barH);
            ctx.fillStyle = "#FFFFFF";
            drawRoundedRect(barX, barY, fillW, barH, barH / 2);
            ctx.fill();
        }

    } else {
        // Classic OS X Aqua style loading bar
        // 1. Container outer
        ctx.fillStyle = "#999999";
        drawRoundedRect(barX, barY, barW, barH, barH / 2);
        ctx.fill();

        // 2. Container inner background
        ctx.fillStyle = "#E5E5E5";
        drawRoundedRect(barX + 1, barY + 1, barW - 2, barH - 2, (barH - 2) / 2);
        ctx.fill();

        let rawFillW = (barW - 4) * (progVal / 100);
        let innerR = (barH - 4) / 2;
        
        if (rawFillW > 0) {
            let fillW = Math.max(rawFillW, innerR * 2);
            
            // 3. Aqua blue gradient track
            let grad = ctx.createLinearGradient(0, barY + 2, 0, barY + barH - 2);
            grad.addColorStop(0, "#92B1E8");
            grad.addColorStop(0.5, "#4875DB");
            grad.addColorStop(1, "#2851B9");
            ctx.fillStyle = grad;
            drawRoundedRect(barX + 2, barY + 2, fillW, barH - 4, innerR);
            ctx.fill();

            // 4. Glossy glare overlay for 3D pill look
            ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
            ctx.beginPath();
            ctx.moveTo(barX + 2 + innerR, barY + 2);
            ctx.lineTo(barX + 2 + fillW - innerR, barY + 2);
            ctx.arcTo(barX + 2 + fillW, barY + 2, barX + 2 + fillW, barY + 2 + innerR, innerR);
            ctx.lineTo(barX + 2, barY + 2 + innerR);
            ctx.arcTo(barX + 2, barY + 2, barX + 2 + innerR, barY + 2, innerR);
            ctx.closePath();
            ctx.fill();
        }
    }

    return canvas;
}