Magic Color Image Editor

function processImage(originalImg, saturation = 160, contrast = 120, hueShift = 15, glowIntensity = 50, vignetteStrength = 40) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // Parse and validate parameters
    const sat = isNaN(Number(saturation)) ? 160 : Number(saturation);
    const con = isNaN(Number(contrast)) ? 120 : Number(contrast);
    const hue = isNaN(Number(hueShift)) ? 15 : Number(hueShift);
    const glow = isNaN(Number(glowIntensity)) ? 0.5 : Math.max(0, Math.min(100, Number(glowIntensity))) / 100;
    const vig = isNaN(Number(vignetteStrength)) ? 0.4 : Math.max(0, Math.min(100, Number(vignetteStrength))) / 100;

    // Step 1: Base layer with enhanced "magic" colors
    ctx.filter = `saturate(${sat}%) contrast(${con}%) hue-rotate(${hue}deg)`;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Step 2: Magical Bloom / Glow Layer
    if (glow > 0) {
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = glow;
        // Calculate a dynamic blur radius based on the image dimensions
        const blurRadius = Math.max(5, Math.min(width, height) * 0.03);
        ctx.filter = `blur(${blurRadius}px) saturate(${sat * 1.2}%) contrast(${con * 1.1}%) hue-rotate(${hue * 1.5}deg)`;
        ctx.drawImage(originalImg, 0, 0, width, height);
    }

    // Step 3: Vignette to emphasize the illuminated center with mystical tones
    if (vig > 0) {
        ctx.globalCompositeOperation = 'multiply';
        ctx.globalAlpha = vig;
        ctx.filter = 'none';

        const cx = width / 2;
        const cy = height / 2;
        const radiusInner = Math.min(width, height) * 0.3;
        const radiusOuter = Math.max(width, height) * 0.8;
        
        // Create a radial gradient for a dreamy vignette edge
        const gradient = ctx.createRadialGradient(cx, cy, radiusInner, cx, cy, radiusOuter);
        
        gradient.addColorStop(0, '#ffffff'); // Pure white at the center (no multiply darkening effect)
        gradient.addColorStop(0.6, '#eef0f5'); // Slight cooling tone transition
        gradient.addColorStop(1, '#536580'); // Deeper mystical blue/grey shadow at the edges
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

    // Reset context state to defaults just in case
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';
    ctx.filter = 'none';

    return canvas;
}