Image Font Creator

/**
 * Creates a "font" from a source image and uses it to render a line of text onto a canvas.
 * This tool functions as a bitmap font renderer. It assumes the source image is a sprite sheet
 * containing all characters of the font arranged in a single horizontal row, with each character
 * having an equal width.
 *
 * @param {Image} originalImg - The source javascript Image object. This should be a pre-loaded image
 *                              containing the character glyphs in a horizontal strip.
 * @param {string} [characterset='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,!?'] - A string containing all characters in the source image, in the exact order they appear from left to right.
 * @param {string} [textToRender='Hello World'] - The text string you want to render using the image font.
 * @param {number} [kerning=0] - The amount of extra space (in pixels) to add between each character. Can be negative to make characters overlap.
 * @param {number} [scale=1] - A multiplier to scale the size of the rendered text. For example, 2 will make it twice as large.
 * @returns {HTMLCanvasElement} A new canvas element with the rendered text.
 */
function processImage(originalImg, characterset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,!?', textToRender = 'Hello World', kerning = 0, scale = 1) {
    // 1. Validate the inputs to ensure the image is usable and the characterset is provided.
    if (!originalImg || originalImg.width === 0 || !characterset || characterset.length === 0) {
        console.error("Invalid input: Image must be a loaded HTMLImageElement and characterset cannot be empty.");
        // Return a canvas with an error message for better user feedback.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 400;
        errorCanvas.height = 50;
        const ctx = errorCanvas.getContext('2d');
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, 400, 50);
        ctx.fillStyle = 'red';
        ctx.font = '16px monospace';
        ctx.fillText('Error: Provide a valid image and characterset.', 10, 30);
        return errorCanvas;
    }

    // 2. Calculate the dimensions of a single character glyph from the source image.
    // This assumes all characters in the sprite sheet have the same width.
    const charWidth = originalImg.width / characterset.length;
    const charHeight = originalImg.height;

    // 3. Create a Map for fast lookup of a character's horizontal position (sourceX) in the image.
    const charMap = new Map();
    for (let i = 0; i < characterset.length; i++) {
        const char = characterset[i];
        const sourceX = i * charWidth;
        charMap.set(char, sourceX);
    }

    // 4. Calculate the total dimensions required for the output canvas.
    let totalWidthUnscaled = 0;
    let drawableCharCount = 0;
    for (const char of textToRender) {
        // We only allocate width for characters that exist in our font map or are spaces.
        if (charMap.has(char) || char === ' ') {
            totalWidthUnscaled += charWidth;
            drawableCharCount++;
        }
    }
    // Add the total kerning (spacing) between characters.
    if (drawableCharCount > 0) {
        totalWidthUnscaled += (drawableCharCount - 1) * kerning;
    }

    // Ensure the width is not negative if kerning is large and negative.
    totalWidthUnscaled = Math.max(0, totalWidthUnscaled);

    const canvasWidth = totalWidthUnscaled * scale;
    const canvasHeight = charHeight * scale;

    // If there's nothing to draw, return an empty canvas.
    if (canvasWidth === 0 || canvasHeight === 0) {
        return document.createElement('canvas');
    }

    // 5. Create the output canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // 6. Iterate through the input text and draw each character's glyph onto the canvas.
    let currentX = 0;
    for (const char of textToRender) {
        if (charMap.has(char)) {
            // Character exists in our font.
            const sourceX = charMap.get(char);
            ctx.drawImage(
                originalImg,
                sourceX, 0, // Source rectangle (x, y, width, height) from the sprite image
                charWidth, charHeight,
                currentX, 0, // Destination rectangle (x, y, width, height) on the new canvas
                charWidth * scale, charHeight * scale
            );
            // Advance the drawing position for the next character.
            currentX += (charWidth + kerning) * scale;
        } else if (char === ' ') {
            // Handle spaces by simply advancing the drawing position.
            currentX += (charWidth + kerning) * scale;
        }
        // Any characters in textToRender that are not in the characterset are ignored.
    }

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