Image Box Organizer

/**
 * Organizes an image into a grid of boxes with spacing in between.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} rows The number of rows in the grid. Defaults to 4.
 * @param {number} cols The number of columns in the grid. Defaults to 4.
 * @param {number} gap The spacing in pixels between each box. Defaults to 10.
 * @param {string} backgroundColor The background color of the canvas and the gaps. Defaults to '#ffffff'.
 * @returns {HTMLCanvasElement} A canvas element with the organized image.
 */
function processImage(originalImg, rows = 4, cols = 4, gap = 10, backgroundColor = '#ffffff') {
    // Ensure parameters are valid numbers
    const numRows = Number(rows) || 4;
    const numCols = Number(cols) || 4;
    const gapSize = Number(gap) || 0;

    // Get original image dimensions
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // Calculate the size of each tile/box from the source image
    const tileWidth = originalWidth / numCols;
    const tileHeight = originalHeight / numRows;

    // Calculate the total canvas dimensions including gaps
    // The total width is the sum of all column widths plus the gaps between them.
    // The total height is the sum of all row heights plus the gaps between them.
    const canvasWidth = originalWidth + (numCols - 1) * gapSize;
    const canvasHeight = originalHeight + (numRows - 1) * gapSize;

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

    // Fill the background with the specified color
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // Loop through each row and column to draw the image slices
    for (let r = 0; r < numRows; r++) {
        for (let c = 0; c < numCols; c++) {
            // Source coordinates (sx, sy) and dimensions (sWidth, sHeight) from the original image
            const sx = c * tileWidth;
            const sy = r * tileHeight;
            const sWidth = tileWidth;
            const sHeight = tileHeight;

            // Destination coordinates (dx, dy) on the canvas, accounting for gaps
            const dx = c * (tileWidth + gapSize);
            const dy = r * (tileHeight + gapSize);
            
            // Draw the image slice onto the canvas
            ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, dx, dy, tileWidth, tileHeight);
        }
    }

    // Return the resulting canvas
    return canvas;
}