Image Anatomical Illustration Frame Creator

async function processImage(
    originalImg,
    lineColor = '#5D4037', // Default color for frame lines (dark brownish-grey)
    lineWidth = 1,         // Default thickness for each frame line
    imageToFrameGap = 5,   // Default space between the image and the innermost frame line
    frameToEdgeGap = 10,   // Default space between the outermost frame line and the canvas edge
    paperColor = '#F5F0E1',// Default background color of the "paper" (parchment-like)
    numFrameLines = 2,     // Default number of concentric frame lines
    frameLineSpacing = 2   // Default spacing between frame lines if numFrameLines > 1
) {
    // Ensure numeric types for parameters that might be passed as strings
    const numericLineWidth = Math.max(0, Number(lineWidth)); // Avoid negative or NaN line width
    const numericImageToFrameGap = Number(imageToFrameGap);
    const numericFrameToEdgeGap = Number(frameToEdgeGap);
    const numericNumFrameLines = Math.max(0, Math.floor(Number(numFrameLines))); // Ensure non-negative integer
    const numericFrameLineSpacing = Number(frameLineSpacing);

    // Calculate the total thickness of the band of frame lines.
    // This band includes all lines and the spaces between them.
    let totalFrameBandThickness = 0;
    if (numericNumFrameLines > 0) {
        totalFrameBandThickness = (numericNumFrameLines * numericLineWidth) + 
                                  (Math.max(0, numericNumFrameLines - 1) * numericFrameLineSpacing);
    }

    // Calculate canvas dimensions
    const canvasWidth = originalImg.width + (2 * numericImageToFrameGap) + (2 * totalFrameBandThickness) + (2 * numericFrameToEdgeGap);
    const canvasHeight = originalImg.height + (2 * numericImageToFrameGap) + (2 * totalFrameBandThickness) + (2 * numericFrameToEdgeGap);

    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // Draw paper background
    ctx.fillStyle = paperColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // Draw frame lines
    // Only draw if lines have a positive thickness and there's at least one line.
    if (numericNumFrameLines > 0 && numericLineWidth > 0) {
        ctx.strokeStyle = lineColor;
        
        // Start with the center of the outermost line
        // The offset is from the canvas edge to the center of the current line being drawn.
        let currentLineCenterOffset = numericFrameToEdgeGap + (numericLineWidth / 2);

        for (let i = 0; i < numericNumFrameLines; i++) {
            ctx.lineWidth = numericLineWidth; // All lines currently use the same thickness
            
            const rectX = currentLineCenterOffset;
            const rectY = currentLineCenterOffset;
            const rectW = canvasWidth - (2 * currentLineCenterOffset);
            const rectH = canvasHeight - (2 * currentLineCenterOffset);
            
            // strokeRect draws a line centered on the path defined by x,y,w,h
            ctx.strokeRect(rectX, rectY, rectW, rectH);

            // Move to the center of the next inner line position
            // This means adding the half-width of the current line, the spacing, and half-width of the next line.
            // Since line widths are the same, it simplifies to numericLineWidth + numericFrameLineSpacing.
            if (i < numericNumFrameLines - 1) {
                currentLineCenterOffset += numericLineWidth + numericFrameLineSpacing;
            }
        }
    }

    // Draw the original image
    // The image is placed considering all paddings and the total frame band thickness
    const imageX = numericFrameToEdgeGap + totalFrameBandThickness + numericImageToFrameGap;
    const imageY = numericFrameToEdgeGap + totalFrameBandThickness + numericImageToFrameGap;
    ctx.drawImage(originalImg, imageX, imageY, originalImg.width, originalImg.height);

    return canvas;
}