I KILLED X Losky Effect Image Generator

function processImage(originalImg, targetName = "X", effectIntensity = "1.0", topText = "I KILLED", textColor = "#ffffff") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    
    // Set canvas dimensions to match the image
    canvas.width = w;
    canvas.height = h;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Parse intensity
    const intensity = parseFloat(effectIntensity) || 1.0;

    // Apply the "Losky" Visual Effect:
    // This effect consists of Chromatic Aberration (RGB shift), High Contrast, and Darkening
    if (intensity > 0) {
        const imgData = ctx.getImageData(0, 0, w, h);
        const data = imgData.data;
        const outputData = new Uint8ClampedArray(data);

        // Calculate horizontal offset for the glitch effect based on width & intensity
        const offset = Math.floor((w * 0.01) * intensity);

        // Contrast calculation
        const contrast = 1.3 * intensity; // Boost contrast
        const intercept = 128 * (1 - contrast);

        for (let y = 0; y < h; y++) {
            for (let x = 0; x < w; x++) {
                const i = (y * w + x) * 4;

                // Grab original RGB
                let r = data[i];
                let g = data[i + 1];
                let b = data[i + 2];

                // Shift RED channel from the right 
                if (x + offset < w) {
                    r = data[(y * w + (x + offset)) * 4];
                }
                
                // Shift BLUE channel from the left
                if (x - offset >= 0) {
                    b = data[(y * w + (x - offset)) * 4 + 2];
                }

                // Apply Contrast and update the output array (clamping is automatic in Uint8ClampedArray)
                outputData[i]     = r * contrast + intercept;
                outputData[i + 1] = g * contrast + intercept;
                outputData[i + 2] = b * contrast + intercept;
                outputData[i + 3] = data[i + 3]; // Keep original Alpha
            }
        }

        // Put the visually altered image data back
        ctx.putImageData(new ImageData(outputData, w, h), 0, 0);
    }

    // Apply Heavy Vignette (darkened edges)
    const cx = w / 2;
    const cy = h / 2;
    const maxRadius = Math.sqrt(cx * cx + cy * cy);
    const gradient = ctx.createRadialGradient(cx, cy, maxRadius * 0.2, cx, cy, maxRadius * 0.95);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, `rgba(0,0,0,${0.85 * Math.min(intensity, 1.5)})`);
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, w, h);

    // Helper function to draw edgy, glitched meme text
    function drawEdgyText(text, x, y, size, fillColor) {
        if (!text) return;
        
        const str = String(text).toUpperCase();
        ctx.font = `italic bold ${size}px Impact, "Arial Black", sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.lineJoin = 'round';
        ctx.miterLimit = 2;

        const shift = size * 0.025 * intensity;

        // Draw Glitch Layers (Red & Cyan)
        ctx.fillStyle = 'rgba(255, 0, 0, 0.9)';
        ctx.fillText(str, x - shift, y);

        ctx.fillStyle = 'rgba(0, 255, 255, 0.8)';
        ctx.fillText(str, x + shift, y);

        // Draw heavy black stroke
        ctx.lineWidth = size * 0.12;
        ctx.strokeStyle = 'black';
        ctx.strokeText(str, x, y);

        // Draw main text fill
        ctx.fillStyle = fillColor;
        ctx.fillText(str, x, y);
    }

    // Determine font sizes based on image height
    const fontSizeTop = Math.max(Math.floor(h * 0.12), 24);
    const fontSizeBottom = Math.max(Math.floor(h * 0.16), 32);

    // Draw Top Text ("I KILLED")
    drawEdgyText(topText, w / 2, h * 0.15, fontSizeTop, textColor);

    // Draw Bottom Text (The Target "X")
    // Usually, the bottom text gets a more bloody/dramatic color in this meme effect (red), 
    // but falls back to user color if they match.
    const bottomColor = textColor === "#ffffff" ? "#ff1111" : textColor;
    drawEdgyText(targetName, w / 2, h * 0.85, fontSizeBottom, bottomColor);

    return canvas;
}