Image Alphabet Editor

/**
 * Creates a new image by "writing" text using characters from a source image alphabet (spritesheet).
 * This function treats the input image as a single-row spritesheet where each character
 * in the 'alphabet' string corresponds to a vertical slice of the image. It then renders
 * the input 'text' onto a new canvas using these character images.
 *
 * @param {Image} originalImg The source image object acting as a character spritesheet. All characters should be in a single row and have equal width.
 * @param {string} [text="HELLO WORLD"] The text to render. Use '\n' for new lines.
 * @param {string} [alphabet="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!?'()"] A string containing all characters present in the originalImg, in the same order they appear from left to right.
 * @param {number} [charSpacing=1] The horizontal space (in pixels) to add between each character.
 * @param {number} [lineSpacing=5] The vertical space (in pixels) to add between each line.
 * @returns {HTMLCanvasElement} A new canvas element with the rendered text.
 */
function processImage(originalImg, text = "HELLO WORLD", alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!?'()", charSpacing = 1, lineSpacing = 5) {
    // Ensure input is valid to prevent errors, returning a minimal canvas if not.
    if (!originalImg || !alphabet || alphabet.length === 0 || originalImg.width === 0 || originalImg.height === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        return emptyCanvas;
    }

    // Calculate the dimensions of a single character from the spritesheet.
    const charWidth = originalImg.width / alphabet.length;
    const charHeight = originalImg.height;

    // Create a Map for efficient lookup of a character's position in the spritesheet.
    const charMap = new Map();
    for (let i = 0; i < alphabet.length; i++) {
        charMap.set(alphabet[i], i);
    }

    // Pre-calculate the required canvas dimensions based on the text.
    const lines = text.split('\n');
    let maxCharsPerLine = 0;
    lines.forEach(line => {
        if (line.length > maxCharsPerLine) {
            maxCharsPerLine = line.length;
        }
    });

    // Calculate final canvas size, ensuring it's at least 1x1 pixels.
    const canvasWidth = maxCharsPerLine > 0 ? (maxCharsPerLine * charWidth) + ((maxCharsPerLine - 1) * charSpacing) : 0;
    const canvasHeight = lines.length > 0 ? (lines.length * charHeight) + ((lines.length - 1) * lineSpacing) : 0;

    // Create the destination canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    canvas.width = Math.max(1, canvasWidth);
    canvas.height = Math.max(1, canvasHeight);
    const ctx = canvas.getContext('2d');

    // Initialize drawing coordinates.
    let currentY = 0;

    // Iterate through each line and then each character to draw the text.
    for (const line of lines) {
        let currentX = 0;
        for (const char of line) {
            const charIndex = charMap.get(char);

            // Check if the character exists in our alphabet map.
            if (charIndex !== undefined) {
                const sourceX = charIndex * charWidth;

                // Draw the character from the spritesheet onto the destination canvas.
                ctx.drawImage(
                    originalImg,
                    sourceX, 0, // Source rectangle (sx, sy)
                    charWidth, charHeight, // Source rectangle (sWidth, sHeight)
                    currentX, currentY, // Destination position (dx, dy)
                    charWidth, charHeight // Destination size (dWidth, dHeight)
                );
            }
            // If the character is not in the alphabet (e.g., a space if it's not in the 'alphabet' string),
            // we simply advance the cursor, effectively leaving a blank space.

            // Move the horizontal cursor for the next character.
            currentX += charWidth + charSpacing;
        }
        // Move the vertical cursor for the next line.
        currentY += charHeight + lineSpacing;
    }

    return canvas;
}