Image Rabbids Scream Effect Generator

function processImage(originalImg, screamText = "BWAAAAAAAAAAAAAH!") {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set the canvas dimensions to match the original image.
    const {
        width,
        height
    } = originalImg;
    canvas.width = width;
    canvas.height = height;

    const centerX = width / 2;
    const centerY = height / 2;

    // 3. Clear the canvas and draw the original image with filters.
    // High saturation and contrast give the image an intense, chaotic feel.
    ctx.clearRect(0, 0, width, height);
    ctx.filter = 'saturate(180%) contrast(140%)';
    ctx.drawImage(originalImg, 0, 0, width, height);
    // Reset the filter so it doesn't affect subsequent drawings (like the text).
    ctx.filter = 'none';

    // 4. Add a radial gradient overlay for the "scream" effect.
    // This simulates a shockwave of sound emanating from the center,
    // with a dark vignette to focus attention.
    const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY);
    const gradient = ctx.createRadialGradient(
        centerX, centerY, 0,
        centerX, centerY, outerRadius
    );
    gradient.addColorStop(0, 'rgba(255, 120, 0, 0.15)'); // Subtle orange glow at the center
    gradient.addColorStop(0.6, 'rgba(200, 0, 0, 0.5)'); // Red tone spreading outwards
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.85)'); // Dark vignette at the edges

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 5. Add the iconic scream text at the bottom.
    // The font size is calculated relative to the image height to be large and impactful.
    const fontSize = Math.floor(height / 7);
    // 'Impact' is a classic, web-safe font perfect for this meme-style effect.
    ctx.font = `bold ${fontSize}px Impact, 'Arial Black', sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    // A thick black stroke makes the white text readable against any image background.
    ctx.strokeStyle = 'black';
    ctx.lineWidth = Math.max(3, fontSize / 15); // Ensure stroke is a decent thickness
    ctx.fillStyle = 'white';

    // Position the text near the bottom edge.
    const textYPosition = height - (height * 0.05);

    // Draw the text stroke (outline) first, then the fill on top.
    ctx.strokeText(screamText.toUpperCase(), centerX, textYPosition);
    ctx.fillText(screamText.toUpperCase(), centerX, textYPosition);

    // 6. Return the completed canvas element.
    return canvas;
}