Stylized X-Ray Image Creator With Abstract Patterns

/**
 * Creates a stylized X-ray effect on an image, complete with a colorizable glow,
 * abstract scanline patterns, and a vignette.
 *
 * @param {Image} originalImg The original Javascript Image object.
 * @param {string} glowColor The color of the glow and scanlines, in a CSS-compatible format (e.g., '#00FFFF', 'cyan').
 * @param {number} contrast Controls the contrast of the X-ray effect. A value of 1 is normal, >1 increases contrast.
 * @param {number} brightness Adjusts the brightness. 0 is normal, negative values darken, positive values lighten.
 * @param {number} scanlineOpacity The opacity of the abstract scanline pattern, from 0 (transparent) to 1 (opaque).
 * @param {number} scanlineFrequency The vertical spacing between scanlines. Smaller numbers mean more lines.
 * @returns {HTMLCanvasElement} A new canvas element with the stylized X-ray image.
 */
function processImage(originalImg, glowColor = '#00FFFF', contrast = 1.5, brightness = -0.2, scanlineOpacity = 0.2, scanlineFrequency = 4) {
    // 1. Create a primary canvas to return
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 2. Create an offscreen canvas for applying the core X-ray filters
    // This prevents filters from affecting subsequent drawing operations like scanlines.
    const offscreenCanvas = document.createElement('canvas');
    const offscreenCtx = offscreenCanvas.getContext('2d');
    offscreenCanvas.width = canvas.width;
    offscreenCanvas.height = canvas.height;

    // 3. Apply the main X-ray filter effect (inversion, grayscale, contrast, brightness)
    // We combine them into a single CSS-like filter string for efficiency.
    // The brightness value is adjusted because after inverting, bright areas become dark.
    offscreenCtx.filter = `
        grayscale(1)
        invert(1)
        contrast(${contrast})
        brightness(${1 + brightness})
    `;
    offscreenCtx.drawImage(originalImg, 0, 0);

    // 4. Create the glowing effect on the main canvas
    // We draw the filtered image multiple times with blur and drop-shadow to build up the glow.
    ctx.filter = `blur(8px) drop-shadow(0 0 12px ${glowColor})`;
    ctx.drawImage(offscreenCanvas, 0, 0); // Broad, soft glow
    ctx.filter = `blur(3px) drop-shadow(0 0 6px ${glowColor})`;
    ctx.drawImage(offscreenCanvas, 0, 0); // Tighter, brighter glow

    // 5. Draw the sharp, core X-ray image on top of the glow layers
    // Using 'lighter' blending makes the bright parts of the image glow intensely.
    ctx.filter = 'none'; // Reset filter before drawing the sharp layer
    ctx.globalCompositeOperation = 'lighter';
    ctx.drawImage(offscreenCanvas, 0, 0);
    ctx.globalCompositeOperation = 'source-over'; // Reset blending mode for next steps

    // 6. Add abstract wave/scanline patterns for a "radiology vibe"
    ctx.globalAlpha = scanlineOpacity;
    ctx.fillStyle = glowColor;
    for (let y = 0; y < canvas.height; y += scanlineFrequency) {
        // Use a sine wave to create a subtle horizontal distortion, mimicking an old CRT screen.
        const xOffset = Math.sin(y / (canvas.height / 30)) * 10;
        ctx.fillRect(-10 + xOffset, y, canvas.width + 20, 2); // Draw 2px high lines
    }
    ctx.globalAlpha = 1.0; // Reset global alpha

    // 7. Add a vignette to darken the corners and focus the view
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY);
    const gradient = ctx.createRadialGradient(centerX, centerY, outerRadius * 0.4, centerX, centerY, outerRadius);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.8)');

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

    // 8. Return the final canvas element
    return canvas;
}