Survival In Hawaiior Drums 2 Image Effect Generator

function processImage(originalImg, text = 'SURVIVAL IN HAWAII', effectMode = 'hawaii') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image
    ctx.drawImage(originalImg, 0, 0);

    // Apply color filter based on the effect mode
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;

    for (let i = 0; i < data.length; i += 4) {
        if (effectMode.toLowerCase().includes('hawaii')) {
            // Warm/Tropical cinematic tone for "Survival in Hawaii"
            data[i] = Math.min(255, data[i] * 1.15);       // Boost Red
            data[i + 1] = Math.min(255, data[i + 1] * 1.05); // Slight boost Green
            data[i + 2] = data[i + 2] * 0.85;              // Reduce Blue
        } else {
            // High contrast vibrant tone for "Drums 2"
            let r = data[i];
            let g = data[i+1];
            let b = data[i+2];
            
            data[i] = r > 127 ? Math.min(255, r + 30) : Math.max(0, r - 30);
            data[i+1] = g > 127 ? Math.min(255, g + 30) : Math.max(0, g - 30);
            data[i+2] = b > 127 ? Math.min(255, b + 30) : Math.max(0, b - 30);
        }
    }
    ctx.putImageData(imgData, 0, 0);

    // Apply dramatic vignette effect
    const gradient = ctx.createRadialGradient(
        canvas.width / 2, canvas.height / 2, 0,
        canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height) / 1.5
    );
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, effectMode.toLowerCase().includes('hawaii') ? 'rgba(50, 20, 0, 0.7)' : 'rgba(0, 0, 0, 0.8)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Render stylized text overlay
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    
    // Scale font size according to image width
    let fontSize = Math.floor(canvas.width / 12);
    ctx.font = `bold ${fontSize}px Impact, Charcoal, sans-serif`;
    
    // Setup text styling
    ctx.lineWidth = Math.max(3, fontSize / 12);
    ctx.strokeStyle = '#000000';
    
    // Shadow for depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;

    // Fill color based on mode
    ctx.fillStyle = effectMode.toLowerCase().includes('hawaii') ? '#FFD700' : '#FF3366';

    const textToDraw = text.toUpperCase();
    const margin = fontSize * 0.5;

    // Draw stroke (turn off shadow for stroke to avoid double blurring)
    ctx.shadowColor = 'transparent';
    ctx.strokeText(textToDraw, canvas.width / 2, canvas.height - margin);
    
    // Turn shadow back on for the fill
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.fillText(textToDraw, canvas.width / 2, canvas.height - margin);

    return canvas;
}