Image Art Deco Poster Frame Creator

async function processImage(originalImg,
    bgColor = '#ECE5D8',         // Background/spacing color (Light cream/beige)
    frameColorOuter = '#3A3A3A',  // Outer frame color (Dark charcoal)
    thicknessOuter = 25,         // Thickness of the outer frame band
    gap1 = 8,                    // Space between outer and middle frame bands
    frameColorMiddle = '#C0A062', // Middle frame color (Muted gold/bronze)
    thicknessMiddle = 18,        // Thickness of the middle frame band
    gap2 = 8,                    // Space between middle and inner frame bands
    frameColorInner = '#5A5A5A',  // Inner frame color (Medium-dark gray)
    thicknessInner = 6,          // Thickness of the inner frame band
    gapImage = 15,               // Space between innermost frame band and the image
    cornerCutOuter = 30,         // Size of 45-degree cut for outer frame corners (e.g., 0 for sharp, >0 for cut)
    cornerCutMiddle = 20,        // Size of 45-degree cut for middle frame corners
    cornerCutInner = 10          // Size of 45-degree cut for inner frame corners
) {

    // Helper function to draw a rectangle with cut corners and fill it
    function drawFilledCutCornerRect(ctx, x, y, w, h, cutSize, fillColor) {
        // Ensure cutSize is a non-negative number
        cutSize = Math.max(0, parseFloat(cutSize) || 0);
        // Ensure cutSize is not too large for the dimensions
        // Use Math.abs for w/h in case they are somehow negative, though logic should prevent this.
        cutSize = Math.min(cutSize, Math.abs(w) / 2, Math.abs(h) / 2);

        ctx.beginPath();
        // Top-left corner starting point
        ctx.moveTo(x + cutSize, y);
        // Top edge
        ctx.lineTo(x + w - cutSize, y);
        // Top-right corner (chamfer)
        if (cutSize > 0) {
            ctx.lineTo(x + w, y + cutSize);
        }
        // Right edge
        ctx.lineTo(x + w, y + h - cutSize);
        // Bottom-right corner (chamfer)
        if (cutSize > 0) {
            ctx.lineTo(x + w - cutSize, y + h);
        }
        // Bottom edge
        ctx.lineTo(x + cutSize, y + h);
        // Bottom-left corner (chamfer)
        if (cutSize > 0) {
            ctx.lineTo(x, y + h - cutSize);
        }
        // Left edge
        ctx.lineTo(x, y + cutSize);
        // Top-left corner (chamfer closing to moveTo point)
        if (cutSize > 0) {
            ctx.lineTo(x + cutSize, y);
        }
        ctx.closePath();
        
        ctx.fillStyle = fillColor;
        ctx.fill();
    }

    // Calculate the total width of the frame bands and gaps on one side
    const totalFrameWidth = thicknessOuter + gap1 + thicknessMiddle + gap2 + thicknessInner + gapImage;

    // Calculate canvas dimensions
    const canvasWidth = originalImg.width + 2 * totalFrameWidth;
    const canvasHeight = originalImg.height + 2 * totalFrameWidth;

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

    // Initialize current drawing position (top-left) and dimensions for concentric layers
    let currentX = 0;
    let currentY = 0;
    let currentW = canvasWidth;
    let currentH = canvasHeight;

    // Layer 1: Outer Frame (using frameColorOuter)
    // This is the bottom-most frame layer. It fills the entire canvas area for its shape.
    drawFilledCutCornerRect(ctx, currentX, currentY, currentW, currentH, cornerCutOuter, frameColorOuter);

    // Layer 2: This layer creates the visual effect of Gap1 using bgColor.
    // It's drawn on top of Layer 1, inset by thicknessOuter.
    currentX += thicknessOuter;
    currentY += thicknessOuter;
    currentW -= 2 * thicknessOuter;
    currentH -= 2 * thicknessOuter;
    // The cut for this gap layer should continue the chamfer line from the outer cut
    let gap1Cut = Math.max(0, cornerCutOuter - thicknessOuter);
    drawFilledCutCornerRect(ctx, currentX, currentY, currentW, currentH, gap1Cut, bgColor);

    // Layer 3: Middle Frame (using frameColorMiddle)
    // Drawn on top of Layer 2, inset by gap1.
    currentX += gap1;
    currentY += gap1;
    currentW -= 2 * gap1;
    currentH -= 2 * gap1;
    drawFilledCutCornerRect(ctx, currentX, currentY, currentW, currentH, cornerCutMiddle, frameColorMiddle);

    // Layer 4: This layer creates the visual effect of Gap2 using bgColor.
    // Drawn on top of Layer 3, inset by thicknessMiddle.
    currentX += thicknessMiddle;
    currentY += thicknessMiddle;
    currentW -= 2 * thicknessMiddle;
    currentH -= 2 * thicknessMiddle;
    let gap2Cut = Math.max(0, cornerCutMiddle - thicknessMiddle);
    drawFilledCutCornerRect(ctx, currentX, currentY, currentW, currentH, gap2Cut, bgColor);

    // Layer 5: Inner Frame (using frameColorInner)
    // Drawn on top of Layer 4, inset by gap2.
    currentX += gap2;
    currentY += gap2;
    currentW -= 2 * gap2;
    currentH -= 2 * gap2;
    drawFilledCutCornerRect(ctx, currentX, currentY, currentW, currentH, cornerCutInner, frameColorInner);

    // Layer 6: This layer creates the visual effect of GapImage using bgColor.
    // This is the background area immediately surrounding the image, drawn on top of Layer 5.
    currentX += thicknessInner;
    currentY += thicknessInner;
    currentW -= 2 * thicknessInner;
    currentH -= 2 * thicknessInner;
    let gapImageCut = Math.max(0, cornerCutInner - thicknessInner);
    drawFilledCutCornerRect(ctx, currentX, currentY, currentW, currentH, gapImageCut, bgColor);
    
    // Finally, draw the original image on top of all frame layers.
    // currentX and currentY at this point are equal to totalFrameWidth,
    // which is the coordinate for the top-left corner of the image.
    ctx.drawImage(originalImg, currentX, currentY, originalImg.width, originalImg.height);

    return canvas;
}