I Killed Losky Image Effect Generator

function processImage(originalImg, titleText = "I KILLED LOSKY", overlayColor = "#660000", vignetteIntensity = 0.85) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const width = canvas.width;
    const height = canvas.height;

    // 1. Apply a dramatic high-contrast and desaturated filter directly during draw
    // This creates a gritty, cinematic base for the effect
    ctx.filter = 'grayscale(80%) contrast(150%) brightness(90%)';
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Reset filter for subsequent drawing operations
    ctx.filter = 'none';

    // 2. Apply a dramatic tint/overlay (gives it a death-cam / blood-tinted vibe)
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, 0, width, height);
    
    // Reset compositing mode
    ctx.globalCompositeOperation = 'source-over';

    // 3. Add heavy dark vignette to push focus to the center
    const gradient = ctx.createRadialGradient(
        width / 2, height / 2, Math.min(width, height) * 0.25,
        width / 2, height / 2, Math.max(width, height) * 0.8
    );
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    
    // Parse intensity to ensure it's a valid float
    const intense = Math.max(0, Math.min(1, parseFloat(vignetteIntensity) || 0.85));
    gradient.addColorStop(1, `rgba(0,0,0,${intense})`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 4. Draw bold, cinematic text in the center
    // Dynamically calculate font size based on image width
    const fontSize = Math.max(30, Math.floor(width / 10));
    ctx.font = `bold ${fontSize}px Impact, "Arial Black", sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Add a strong drop shadow for text pop
    ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 8;
    ctx.shadowOffsetY = 8;
    
    const textX = width / 2;
    const textY = height / 2;
    
    // Draw thick outer black stroke
    ctx.lineWidth = Math.max(4, Math.floor(fontSize / 10));
    ctx.strokeStyle = '#000000';
    ctx.strokeText(titleText, textX, textY);
    
    // Draw inner text fill (Bloody Red)
    // Using gradient for the text fill for extra styling
    const textGradient = ctx.createLinearGradient(0, textY - fontSize/2, 0, textY + fontSize/2);
    textGradient.addColorStop(0, "#ff4444");
    textGradient.addColorStop(1, "#8a0000");
    ctx.fillStyle = textGradient;
    ctx.fillText(titleText, textX, textY);
    
    // Add a secondary thin inner white stroke to make the letters pop sharper
    ctx.lineWidth = Math.max(1, Math.floor(fontSize / 35));
    ctx.strokeStyle = '#ffffff';
    ctx.shadowBlur = 0; // Turn off shadow so it doesn't duplicate
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.strokeText(titleText, textX, textY);
    
    return canvas;
}