Image 8-Bit Pixel Art Frame Creator

function processImage(originalImg, frameColor = "black", frameThickness = 20, pixelSize = 10) {

    // Helper function to draw a pixelated rectangle region.
    // This function is defined within processImage to keep it self-contained.
    function _drawPixelatedRectRegion(ctx, rX, rY, rWidth, rHeight, color, pSize) {
        // If the region has no width or height, there's nothing to draw.
        if (rWidth <= 0 || rHeight <= 0) {
            return;
        }

        ctx.fillStyle = color; // Set the fill color for the pixels

        // Iterate over the region in pSize steps
        for (let yOffset = 0; yOffset < rHeight; yOffset += pSize) {
            for (let xOffset = 0; xOffset < rWidth; xOffset += pSize) {
                // Calculate the actual width and height of the current "pixel" block.
                // This handles cases where the region edge is not a multiple of pSize,
                // ensuring pixels don't extend beyond the designated region.
                const pixelBlockWidth = Math.min(pSize, rWidth - xOffset);
                const pixelBlockHeight = Math.min(pSize, rHeight - yOffset);
                
                // Draw the "pixel" block
                ctx.fillRect(rX + xOffset, rY + yOffset, pixelBlockWidth, pixelBlockHeight);
            }
        }
    }

    // Validate and sanitize numerical parameters.
    // pixelSize must be at least 1 and an integer (fractional pixels are not typical for "pixel art").
    pixelSize = Math.max(1, Math.floor(pixelSize));
    // frameThickness must be non-negative and an integer.
    frameThickness = Math.max(0, Math.floor(frameThickness));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine the dimensions of the original image.
    // Prioritize naturalWidth/Height for HTMLImageElement's intrinsic size.
    // Fallback to width/height for other CanvasImageSource types (like another canvas)
    // or if natural sizes are 0 (e.g., image not loaded yet or invalid).
    // Ensure dimensions are non-negative.
    const imgWidth = Math.max(0, originalImg.naturalWidth || originalImg.width || 0);
    const imgHeight = Math.max(0, originalImg.naturalHeight || originalImg.height || 0);

    // Calculate the final canvas dimensions, including the frame.
    const canvasWidth = imgWidth + 2 * frameThickness;
    const canvasHeight = imgHeight + 2 * frameThickness;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    // If the canvas has no effective size (e.g., a 0x0 image with no frame),
    // return the (potentially 0x0) canvas. Nothing more to draw.
    if (canvasWidth === 0 || canvasHeight === 0) {
        return canvas;
    }

    // Draw the frame only if frameThickness is greater than 0.
    if (frameThickness > 0) {
        // The frame is composed of four rectangular regions.
        // These regions are filled with "pixels" using the helper function.

        // 1. Top border strip:
        // Spans the full canvas width. Its height is frameThickness.
        // Positioned at (0, 0).
        _drawPixelatedRectRegion(ctx, 0, 0, canvasWidth, frameThickness, frameColor, pixelSize);
        
        // 2. Bottom border strip:
        // Spans the full canvas width. Its height is frameThickness.
        // Positioned at the bottom of the canvas. Its Y coordinate starts after the image height and top frame part.
        _drawPixelatedRectRegion(ctx, 0, imgHeight + frameThickness, canvasWidth, frameThickness, frameColor, pixelSize);
        
        // 3. Left border strip:
        // This is the vertical part of the frame, to the left of where the image will be drawn.
        // Its X position is 0. Its Y position is after the top border strip (i.e., at frameThickness).
        // Its width is frameThickness, and its height is the image height (imgHeight).
        _drawPixelatedRectRegion(ctx, 0, frameThickness, frameThickness, imgHeight, frameColor, pixelSize);
        
        // 4. Right border strip:
        // This is the vertical part of the frame, to the right of where the image will be drawn.
        // Its X position is after the image width and the left frame part (i.e., at imgWidth + frameThickness).
        // Its Y position is after the top border strip (i.e., at frameThickness).
        // Its width is frameThickness, and its height is the image height (imgHeight).
        _drawPixelatedRectRegion(ctx, imgWidth + frameThickness, frameThickness, frameThickness, imgHeight, frameColor, pixelSize);
    }
    
    // Draw the original image onto the canvas, in the central area reserved for it.
    // This area is offset by frameThickness from the top-left of the canvas.
    // Only draw if the image has dimensions, to avoid errors with 0x0 images.
    if (imgWidth > 0 && imgHeight > 0) {
        ctx.drawImage(originalImg, frameThickness, frameThickness, imgWidth, imgHeight);
    }

    return canvas;
}