Image Style Translator And Alphabet Tool

/**
 * Applies an image's style as a texture to a given text, creating a "styled alphabet" effect.
 * This function renders text with a fill pattern from the source image, and includes options
 * for stroke, shadow, and custom Google Fonts.
 *
 * @param {Image} originalImg The source image object to use as the style/texture.
 * @param {string} [text='STYLE'] The text content to render.
 * @param {number} [fontSize=150] The font size in pixels.
 * @param {string} [fontFamily='Anton'] The font family. Supports web-safe fonts and a selection of Google Fonts ('Anton', 'Oswald', 'Lobster', 'Pacifico', 'Orbitron', 'Bebas Neue').
 * @param {string} [fontWeight='900'] The font weight (e.g., 'normal', 'bold', '400', '900').
 * @param {string} [fontStyle='normal'] The font style (e.g., 'normal', 'italic').
 * @param {number} [strokeWidth=3] The width of the text stroke (outline). Set to 0 for no stroke.
 * @param {string} [strokeColor='#000000'] The color of the text stroke.
 * @param {string} [shadowColor='rgba(0,0,0,0.5)'] The color of the drop shadow.
 * @param {number} [shadowBlur=10] The blur level of the drop shadow.
 * @param {number} [shadowOffsetX=5] The horizontal offset of the drop shadow.
 * @param {number} [shadowOffsetY=5] The vertical offset of the drop shadow.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the canvas element containing the styled text.
 */
async function processImage(
    originalImg,
    text = 'STYLE',
    fontSize = 150,
    fontFamily = 'Anton',
    fontWeight = '900',
    fontStyle = 'normal',
    strokeWidth = 3,
    strokeColor = '#000000',
    shadowColor = 'rgba(0,0,0,0.5)',
    shadowBlur = 10,
    shadowOffsetX = 5,
    shadowOffsetY = 5
) {
    // A map of popular Google Fonts to load dynamically
    const googleFonts = {
        'Anton': 'https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyUCRv-_dY.woff2',
        'Oswald': 'https://fonts.gstatic.com/s/oswald/v49/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZSSUhiCXAA.woff2',
        'Lobster': 'https://fonts.gstatic.com/s/lobster/v30/neILzCirqoswsqX9zo-mM5Ez.woff2',
        'Pacifico': 'https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6MmBpA.woff2',
        'Orbitron': 'https://fonts.gstatic.com/s/orbitron/v31/yMJRMIlzdpvBhQQL_Qq7dy0.woff2',
        'Bebas Neue': 'https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoox-BvCFM.woff2'
    };

    let effectiveFontFamily = fontFamily;

    // Dynamically load the Google Font if it's in our list and not already available
    if (googleFonts[fontFamily] && !document.fonts.check(`12px ${fontFamily}`)) {
        try {
            const font = new FontFace(fontFamily, `url(${googleFonts[fontFamily]})`);
            await font.load();
            document.fonts.add(font);
        } catch (error) {
            console.error(`Could not load font: ${fontFamily}. Falling back to Arial.`, error);
            effectiveFontFamily = 'Arial'; // Fallback font
        }
    }

    const tempCtx = document.createElement('canvas').getContext('2d');

    // --- Measurement Phase ---
    const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${effectiveFontFamily}`;
    tempCtx.font = fontString;

    const metrics = tempCtx.measureText(text);
    const textWidth = metrics.width;
    const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
    
    // Ensure textHeight is a positive number to avoid canvas sizing errors
    const safeTextHeight = textHeight > 0 ? textHeight : fontSize;

    // Calculate padding needed for stroke and shadow to avoid being clipped
    const paddingX = strokeWidth + Math.abs(shadowOffsetX) + shadowBlur;
    const paddingY = strokeWidth + Math.abs(shadowOffsetY) + shadowBlur;

    const canvasWidth = Math.ceil(textWidth + paddingX * 2);
    const canvasHeight = Math.ceil(safeTextHeight + paddingY * 2);

    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');
    
    // --- Drawing Phase (on an offscreen canvas) ---
    // This allows us to apply a unified shadow to the combined stroke and fill.
    const textCanvas = document.createElement('canvas');
    textCanvas.width = canvas.width;
    textCanvas.height = canvas.height;
    const textCtx = textCanvas.getContext('2d');

    // Set font properties on the offscreen canvas
    textCtx.font = fontString;
    textCtx.textBaseline = 'top';

    // Calculate the top-left position to draw the text, which includes padding.
    const drawX = paddingX;
    const drawY = paddingY;

    // Draw stroke on offscreen canvas
    if (strokeWidth > 0) {
        textCtx.strokeStyle = strokeColor;
        textCtx.lineWidth = strokeWidth;
        textCtx.lineJoin = 'round'; // For smoother corners on the stroke
        textCtx.strokeText(text, drawX, drawY);
    }

    // Draw pattern fill on offscreen canvas
    const pattern = textCtx.createPattern(originalImg, 'repeat');
    if (pattern) {
        textCtx.fillStyle = pattern;
    } else {
        textCtx.fillStyle = '#888'; // Grey fallback if pattern fails
    }
    textCtx.fillText(text, drawX, drawY);

    // --- Compositing Phase ---
    // Now, draw the offscreen text+stroke result onto the main canvas,
    // applying the shadow effect to the entire composite image.
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = shadowBlur;
    ctx.shadowOffsetX = shadowOffsetX;
    ctx.shadowOffsetY = shadowOffsetY;

    ctx.drawImage(textCanvas, 0, 0);

    return canvas;
}