Image Alphabetical Title Translator

function processImage(originalImg, title = "ALPHABET", direction = 'horizontal') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    const n = title.length;

    // If title is too short to produce a scramble, draw the original image and return.
    if (n <= 1) {
        ctx.drawImage(originalImg, 0, 0, width, height);
        return canvas;
    }

    // Create a list of characters, pairing each with its original index.
    const indexedChars = title.split('').map((char, index) => ({ char, index }));

    // Sort the list alphabetically by character. The sorted indices will determine
    // the new arrangement of image slices.
    indexedChars.sort((a, b) => a.char.localeCompare(b.char));

    const normalizedDirection = direction.toLowerCase();

    if (normalizedDirection === 'horizontal') {
        // Process image by rearranging vertical slices.
        for (let i = 0; i < n; i++) {
            // Get the index of the slice that should go into the current position `i`.
            const originalSliceIndex = indexedChars[i].index;

            // Calculate the source slice's rectangle from the original image.
            // Rounding is used to prevent floating-point gaps between slices.
            const sx = Math.round(originalSliceIndex * width / n);
            const sWidth = Math.round((originalSliceIndex + 1) * width / n) - sx;

            // Calculate the destination slice's rectangle on the new canvas.
            const dx = Math.round(i * width / n);
            const dWidth = Math.round((i + 1) * width / n) - dx;
            
            // Draw the slice if its width is positive.
            if (sWidth > 0 && dWidth > 0) {
                 ctx.drawImage(originalImg, 
                    sx, 0, sWidth, height, // Source rectangle
                    dx, 0, dWidth, height); // Destination rectangle
            }
        }
    } else if (normalizedDirection === 'vertical') {
        // Process image by rearranging horizontal slices.
        for (let i = 0; i < n; i++) {
            const originalSliceIndex = indexedChars[i].index;

            // Calculate the source slice's rectangle from the original image.
            const sy = Math.round(originalSliceIndex * height / n);
            const sHeight = Math.round((originalSliceIndex + 1) * height / n) - sy;

            // Calculate the destination slice's rectangle on the new canvas.
            const dy = Math.round(i * height / n);
            const dHeight = Math.round((i + 1) * height / n) - dy;
            
            // Draw the slice if its height is positive.
            if (sHeight > 0 && dHeight > 0) {
                 ctx.drawImage(originalImg,
                    0, sy, width, sHeight,  // Source rectangle
                    0, dy, width, dHeight); // Destination rectangle
            }
        }
    } else {
        // If the direction is not recognized, draw the original image.
        ctx.drawImage(originalImg, 0, 0, width, height);
    }

    return canvas;
}