Image VHS Text Generator

/**
 * Takes an image and adds VHS-style text to it, simulating an old VCR display.
 * This includes chromatic aberration, a slight glow, scanlines, and glitch effects.
 *
 * @async
 * @param {HTMLImageElement} originalImg The original image object to use as a background.
 * @param {string} [text='PLAY'] The text content to display.
 * @param {number} [fontSize=80] The font size of the text in pixels.
 * @param {string} [fontFamily='VCR OSD Mono'] The font to use. It will be dynamically loaded from Google Fonts.
 * @param {string} [textColor='#fafafa'] The hexadecimal or CSS color string for the main text.
 * @param {number} [intensity=4] A number from 0 to 10 controlling the strength of the VHS effects (distortion, glow).
 * @param {number} [textX=50] The horizontal position of the text's center as a percentage (0-100) of the image width.
 * @param {number} [textY=50] The vertical position of the text's center as a percentage (0-100) of the image height.
 * @returns {Promise<HTMLCanvasElement>} A canvas element containing the final image with the VHS text.
 */
async function processImage(
    originalImg,
    text = 'PLAY',
    fontSize = 80,
    fontFamily = 'VCR OSD Mono',
    textColor = '#fafafa',
    intensity = 4,
    textX = 50,
    textY = 50
) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    if (!ctx) {
        const errorDiv = document.createElement('div');
        errorDiv.innerText = 'Canvas API is not supported in your browser.';
        return errorDiv;
    }

    // 2. Dynamically load the specified font if not already available in the document
    const font = `${fontSize}px "${fontFamily}"`;
    if (!document.fonts.check(font)) {
        try {
            const fontUrl = 'https://fonts.gstatic.com/s/vcrosdmono/v21/q5uDsoiSpv0R-iO_KJtm4A6-w3o9_w.woff2';
            const vhsFont = new FontFace(fontFamily, `url(${fontUrl})`);
            await vhsFont.load();
            document.fonts.add(vhsFont);
        } catch (error) {
            console.error(`Font "${fontFamily}" could not be loaded. Using "monospace" as a fallback.`, error);
            fontFamily = 'monospace'; // Set a web-safe fallback font
        }
    }

    // 3. Draw the original image as the background
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 4. Draw overall scanlines for an authentic VCR look
    ctx.save();
    ctx.globalAlpha = 0.15;
    ctx.fillStyle = 'black';
    for (let i = 0; i < canvas.height; i += 4) {
        ctx.fillRect(0, i, canvas.width, 2);
    }
    ctx.restore();

    // 5. Prepare text properties and calculate position
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';

    const x = canvas.width * (textX / 100);
    const y = canvas.height * (textY / 100);

    const safeIntensity = Math.max(0, Math.min(10, intensity));

    // 6. Create the chromatic aberration effect by drawing offset, colored text
    const offset = safeIntensity * 1.5;
    ctx.save();
    ctx.globalCompositeOperation = 'lighter'; // Use additive blending for a glow effect

    // Red channel offset
    ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
    ctx.fillText(text, x + offset, y);

    // Blue channel offset
    ctx.fillStyle = 'rgba(0, 0, 255, 0.7)';
    ctx.fillText(text, x - offset, y);

    // Green/Cyan channel for extra color fringing
    ctx.fillStyle = 'rgba(0, 255, 255, 0.7)';
    ctx.fillText(text, x, y + offset / 2);

    ctx.restore(); // Restore normal composite operation

    // 7. Draw the main, slightly blurred text on top to ensure readability
    ctx.save();
    ctx.shadowColor = textColor;
    ctx.shadowBlur = safeIntensity * 2.5;
    ctx.fillStyle = textColor;
    ctx.fillText(text, x, y);
    ctx.restore();

    // 8. Add horizontal glitch distortion to simulate tape damage
    if (safeIntensity > 0) {
        const glitchCount = Math.round(safeIntensity / 2);
        for (let i = 0; i < glitchCount; i++) {
            const glitchY = Math.random() * canvas.height;
            const glitchHeight = Math.random() * (fontSize / 5) + 1;

            if (glitchY < 0 || glitchY > canvas.height - glitchHeight) continue;

            try {
                const imageData = ctx.getImageData(0, glitchY, canvas.width, glitchHeight);
                const shift = (Math.random() - 0.5) * (safeIntensity * 4);
                ctx.putImageData(imageData, shift, glitchY);
            } catch (e) {
                // This can fail on tainted canvases (cross-origin images without CORS)
                // We'll skip the glitch effect in that case.
                console.warn("Could not apply glitch effect due to canvas security restrictions.");
                break; // Stop trying to apply glitches if the canvas is tainted
            }
        }
    }

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