Image Episode Organizer Tool

/**
 * Organizes an image into a stylized "episode" frame, adding a title bar at the top
 * and an episode number bar at the bottom. This is useful for creating a comic-style
 * or series-style presentation for an image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} episodeTitle The title text to display in the top bar.
 * @param {number} episodeNumber The episode number to display in the bottom bar.
 * @param {string} borderColor A CSS color string for the outer border of the frame.
 * @param {number} borderWidth The width of the outer border in pixels.
 * @param {string} textColor A CSS color string for the text.
 * @param {string} fontFamily A web-safe font family for the text (e.g., 'Arial, sans-serif').
 * @param {number} fontSize The font size in pixels for the title and episode number.
 * @param {string} backgroundColor A CSS color string for the background of the text bars.
 * @returns {HTMLCanvasElement} A new canvas element displaying the framed image.
 */
function processImage(
    originalImg,
    episodeTitle = "Episode Title",
    episodeNumber = 1,
    borderColor = "black",
    borderWidth = 10,
    textColor = "white",
    fontFamily = "Impact, Charcoal, sans-serif",
    fontSize = 30,
    backgroundColor = "black"
) {
    // Ensure numeric parameters are correctly typed
    const numBorderWidth = Number(borderWidth);
    const numFontSize = Number(fontSize);
    const numEpisodeNumber = Number(episodeNumber);

    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate dimensions for the text bars, providing ample padding
    const topBarHeight = numFontSize + 20;
    const bottomBarHeight = numFontSize + 20;

    // Set the final canvas dimensions based on the original image, borders, and text bars
    canvas.width = originalImg.width + numBorderWidth * 2;
    canvas.height = originalImg.height + numBorderWidth * 2 + topBarHeight + bottomBarHeight;

    // --- Drawing Operations ---

    // 1. Draw the outer border
    // This is done by filling the entire canvas with the border color.
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw the background for the top text bar
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(numBorderWidth, numBorderWidth, originalImg.width, topBarHeight);

    // 3. Draw the original image onto the canvas, positioned below the top bar
    ctx.drawImage(originalImg, numBorderWidth, numBorderWidth + topBarHeight, originalImg.width, originalImg.height);

    // 4. Draw the background for the bottom text bar
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(numBorderWidth, numBorderWidth + topBarHeight + originalImg.height, originalImg.width, bottomBarHeight);

    // 5. Configure text properties for drawing
    ctx.fillStyle = textColor;
    ctx.font = `${numFontSize}px ${fontFamily}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 6. Draw the episode title text in the top bar
    const titleX = canvas.width / 2;
    const titleY = numBorderWidth + topBarHeight / 2;
    ctx.fillText(episodeTitle.toUpperCase(), titleX, titleY);

    // 7. Draw the episode number text in the bottom bar
    const episodeText = `EPISODE #${numEpisodeNumber}`;
    const episodeX = canvas.width / 2;
    const episodeY = canvas.height - numBorderWidth - bottomBarHeight / 2;
    ctx.fillText(episodeText, episodeX, episodeY);

    // Return the completed canvas element
    return canvas;
}