Image Decorum Tool

function processImage(originalImg, matWidth = "40", matColor = "#F5F5DC", frameWidth = "25", frameColor = "#2C1E16") {
    // Parse parameters to ensure they are numeric
    const mWidth = parseInt(matWidth, 10) || 40;
    const fWidth = parseInt(frameWidth, 10) || 25;

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

    // Calculate canvas size based on original image + mat padding + outer frame
    canvas.width = originalImg.width + (mWidth * 2) + (fWidth * 2);
    canvas.height = originalImg.height + (mWidth * 2) + (fWidth * 2);

    // 1. Draw Solid Outer Frame
    ctx.fillStyle = frameColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Add 3D Frame Bevels via Shading/Highlighting (Assuming Top-Left Light Source)
    // Top Edge - Highlight
    ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(canvas.width, 0); 
    ctx.lineTo(canvas.width - fWidth, fWidth); 
    ctx.lineTo(fWidth, fWidth); 
    ctx.fill();
    
    // Bottom Edge - Shadow
    ctx.fillStyle = "rgba(0, 0, 0, 0.35)";
    ctx.beginPath(); 
    ctx.moveTo(0, canvas.height); 
    ctx.lineTo(canvas.width, canvas.height); 
    ctx.lineTo(canvas.width - fWidth, canvas.height - fWidth); 
    ctx.lineTo(fWidth, canvas.height - fWidth); 
    ctx.fill();
    
    // Left Edge - Soft Highlight
    ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(fWidth, fWidth); 
    ctx.lineTo(fWidth, canvas.height - fWidth); 
    ctx.lineTo(0, canvas.height); 
    ctx.fill();
    
    // Right Edge - Soft Shadow
    ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
    ctx.beginPath(); 
    ctx.moveTo(canvas.width, 0); 
    ctx.lineTo(canvas.width - fWidth, fWidth); 
    ctx.lineTo(canvas.width - fWidth, canvas.height - fWidth); 
    ctx.lineTo(canvas.width, canvas.height); 
    ctx.fill();

    // 2. Draw Solid Mat Board
    let matX = fWidth;
    let matY = fWidth;
    let matW = canvas.width - (fWidth * 2);
    let matH = canvas.height - (fWidth * 2);

    ctx.fillStyle = matColor;
    ctx.fillRect(matX, matY, matW, matH);

    // 3. Draw Inner Mat Bevel (The angled cut exposing the core, creating depth)
    let innerX = matX + mWidth;
    let innerY = matY + mWidth;
    let innerW = originalImg.width;
    let innerH = originalImg.height;
    let bevel = 4; // Thickness of the inner angled cut

    // Top Inner Cut - Shadow (since it's a recess, lighting is inverted from the outer frame)
    ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
    ctx.beginPath(); 
    ctx.moveTo(innerX, innerY); 
    ctx.lineTo(innerX + innerW, innerY); 
    ctx.lineTo(innerX + innerW + bevel, innerY - bevel); 
    ctx.lineTo(innerX - bevel, innerY - bevel); 
    ctx.fill();
    
    // Bottom Inner Cut - Highlight
    ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
    ctx.beginPath(); 
    ctx.moveTo(innerX, innerY + innerH); 
    ctx.lineTo(innerX + innerW, innerY + innerH); 
    ctx.lineTo(innerX + innerW + bevel, innerY + innerH + bevel); 
    ctx.lineTo(innerX - bevel, innerY + innerH + bevel); 
    ctx.fill();
    
    // Left Inner Cut - Soft Shadow
    ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
    ctx.beginPath(); 
    ctx.moveTo(innerX, innerY); 
    ctx.lineTo(innerX, innerY + innerH); 
    ctx.lineTo(innerX - bevel, innerY + innerH + bevel); 
    ctx.lineTo(innerX - bevel, innerY - bevel); 
    ctx.fill();
    
    // Right Inner Cut - Soft Highlight
    ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
    ctx.beginPath(); 
    ctx.moveTo(innerX + innerW, innerY); 
    ctx.lineTo(innerX + innerW, innerY + innerH); 
    ctx.lineTo(innerX + innerW + bevel, innerY + innerH + bevel); 
    ctx.lineTo(innerX + innerW + bevel, innerY - bevel); 
    ctx.fill();

    // 4. Draw Original Image
    ctx.drawImage(originalImg, innerX, innerY);

    // 5. Apply Inner Drop Shadow inside the frame opening for extreme realism
    ctx.save();
    ctx.beginPath();
    ctx.rect(innerX, innerY, innerW, innerH);
    ctx.clip(); // Restricts our next drawing steps onto the image alone

    // Draw an invisible stroked rectangle that casts a rich shadow into the picture
    ctx.strokeStyle = "transparent"; 
    ctx.lineJoin = "round";
    ctx.shadowColor = "rgba(0, 0, 0, 0.55)";
    ctx.shadowBlur = Math.min(15, innerW * 0.05); // Scale blur to picture size
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 4;
    
    // Render the stroked rect right outside our clipping area so that only the cast shadow enters
    ctx.strokeRect(innerX - 1, innerY - 1, innerW + 2, innerH + 2);
    ctx.restore();

    return canvas;
}