Image Achievement Certificate Framer

function processImage(
    originalImg,
    outerFrameColor = "gold",
    outerFrameWidth = 20,
    middleMatColor = "#EEE8AA", // PaleGoldenrod
    middleMatWidth = 10,
    innerLineColor = "darkgoldenrod",
    innerLineWidth = 2,
    imagePlacementPaddingColor = "#FFFFF0", // Ivory
    imagePlacementPaddingWidth = 5
) {
    // Ensure all width parameters are non-negative numbers
    outerFrameWidth = Math.max(0, Number(outerFrameWidth));
    middleMatWidth = Math.max(0, Number(middleMatWidth));
    innerLineWidth = Math.max(0, Number(innerLineWidth));
    imagePlacementPaddingWidth = Math.max(0, Number(imagePlacementPaddingWidth));

    const totalBorderAndPaddingWidth =
        outerFrameWidth +
        middleMatWidth +
        innerLineWidth +
        imagePlacementPaddingWidth;

    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width + 2 * totalBorderAndPaddingWidth;
    canvas.height = originalImg.height + 2 * totalBorderAndPaddingWidth;

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

    if (!ctx) {
        console.error("Could not get 2D rendering context");
        return canvas; // Return empty canvas or handle error appropriately
    }

    let currentX = 0;
    let currentY = 0;
    let currentWidth = canvas.width;
    let currentHeight = canvas.height;

    // 1. Draw outer frame
    if (outerFrameWidth > 0) {
        ctx.fillStyle = outerFrameColor;
        ctx.fillRect(currentX, currentY, currentWidth, currentHeight);

        currentX += outerFrameWidth;
        currentY += outerFrameWidth;
        currentWidth -= 2 * outerFrameWidth;
        currentHeight -= 2 * outerFrameWidth;
    }

    // 2. Draw middle mat
    if (middleMatWidth > 0) {
        ctx.fillStyle = middleMatColor;
        ctx.fillRect(currentX, currentY, currentWidth, currentHeight);

        currentX += middleMatWidth;
        currentY += middleMatWidth;
        currentWidth -= 2 * middleMatWidth;
        currentHeight -= 2 * middleMatWidth;
    }

    // 3. Draw inner line
    if (innerLineWidth > 0) {
        ctx.fillStyle = innerLineColor;
        ctx.fillRect(currentX, currentY, currentWidth, currentHeight);

        currentX += innerLineWidth;
        currentY += innerLineWidth;
        currentWidth -= 2 * innerLineWidth;
        currentHeight -= 2 * innerLineWidth;
    }

    // 4. Draw image placement padding background
    // This is the background color for the area where the image will be placed,
    // including its own padding.
    if (imagePlacementPaddingWidth >= 0) { // Allow 0 for direct placement on innerLine
        ctx.fillStyle = imagePlacementPaddingColor;
        ctx.fillRect(currentX, currentY, currentWidth, currentHeight);
    }
    
    // 5. Draw the original image
    const imageDrawX = totalBorderAndPaddingWidth;
    const imageDrawY = totalBorderAndPaddingWidth;
    
    ctx.drawImage(originalImg, imageDrawX, imageDrawY, originalImg.width, originalImg.height);

    return canvas;
}