Image Display For Lounge Store

function processImage(originalImg, couchColor = '#8D6E63', wallColor = '#EFEBE9', frameColor = '#424242', frameWidth = 10, shadowColor = 'rgba(0, 0, 0, 0.4)', shadowBlur = 20) {
    // Create canvas and context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const canvasWidth = 1000;
    const canvasHeight = 750;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // --- 1. Draw Background (Wall & Floor) ---
    // Wall
    ctx.fillStyle = wallColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // Floor
    const floorY = 600;
    const floorColor = '#D2B48C'; // Tan / light wood color
    ctx.fillStyle = floorColor;
    ctx.fillRect(0, floorY, canvasWidth, canvasHeight - floorY);
    
    // Add some subtle texture/planks to the floor
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.lineWidth = 1;
    for (let i = 0; i < canvasWidth; i += 80) {
        ctx.beginPath();
        ctx.moveTo(i, floorY);
        ctx.lineTo(i, canvasHeight);
        ctx.stroke();
    }

    // Baseboard
    const baseboardColor = '#A0522D'; // Sienna
    ctx.fillStyle = baseboardColor;
    ctx.fillRect(0, floorY - 10, canvasWidth, 10);
    // Baseboard highlight
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
    ctx.fillRect(0, floorY - 10, canvasWidth, 3);


    // --- 2. Draw Couch ("Лежанка") ---
    const couchX = 200;
    const couchBaseY = 450;
    const couchWidth = 600;
    const couchHeight = 150;
    const armrestWidth = 50;
    const backrestHeight = 120;

    // Main couch body (apply a subtle gradient for depth)
    const couchGradient = ctx.createLinearGradient(couchX, couchBaseY, couchX, couchBaseY + couchHeight);
    couchGradient.addColorStop(0, couchColor);
    // A primitive way to darken a hex color for the gradient's end
    try {
        const r = parseInt(couchColor.slice(1, 3), 16);
        const g = parseInt(couchColor.slice(3, 5), 16);
        const b = parseInt(couchColor.slice(5, 7), 16);
        const darkerCouchColor = `rgb(${Math.max(0, r-30)}, ${Math.max(0, g-30)}, ${Math.max(0, b-30)})`;
        couchGradient.addColorStop(1, darkerCouchColor);
    } catch (e) {
        // Fallback for invalid color strings
        couchGradient.addColorStop(1, couchColor);
    }
    ctx.fillStyle = couchGradient;

    // Draw main parts
    // Backrest
    ctx.fillRect(couchX, couchBaseY - backrestHeight, couchWidth, backrestHeight);
    // Seat
    ctx.fillRect(couchX, couchBaseY, couchWidth, couchHeight);
    // Left Armrest
    ctx.fillRect(couchX - armrestWidth, couchBaseY - (backrestHeight/2), armrestWidth, couchHeight + (backrestHeight/2) );
    // Right Armrest
    ctx.fillRect(couchX + couchWidth, couchBaseY - (backrestHeight/2), armrestWidth, couchHeight + (backrestHeight/2) );
    
    // Add some shading for more 3D effect
    ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
    // Seam between backrest and seat
    ctx.fillRect(couchX, couchBaseY, couchWidth, 10);
     // Seam at arms
    ctx.fillRect(couchX, couchBaseY - backrestHeight, 5, backrestHeight + couchHeight);
    ctx.fillRect(couchX + couchWidth - 5, couchBaseY - backrestHeight, 5, backrestHeight + couchHeight);

    // Legs
    const legColor = '#4a2c2a';
    ctx.fillStyle = legColor;
    const legHeight = 40;
    const legWidth = 30;
    // Front legs
    ctx.fillRect(couchX + 20, couchBaseY + couchHeight, legWidth, legHeight);
    ctx.fillRect(couchX + couchWidth - 20 - legWidth, couchBaseY + couchHeight, legWidth, legHeight);
    
    // --- 3. Calculate Image Position and Size ---
    const imgTargetMaxWidth = 450;
    const imgTargetMaxHeight = 350;

    const scale = Math.min(imgTargetMaxWidth / originalImg.width, imgTargetMaxHeight / originalImg.height);
    const imgW = originalImg.width * scale;
    const imgH = originalImg.height * scale;

    // Center the image on the couch, resting on the seat cushion
    const imgX = (canvasWidth - imgW) / 2;
    // Position it so it appears to be leaning on the backrest.
    const imgY = couchBaseY - imgH + 20;

    // --- 4. Draw the Framed Image ---
    ctx.save();

    // Tilt the image slightly
    const centerX = imgX + imgW / 2;
    const centerY = imgY + imgH / 2;
    ctx.translate(centerX, centerY);
    ctx.rotate(-2 * Math.PI / 180); // Rotate 2 degrees
    ctx.translate(-centerX, -centerY);

    // Apply shadow to the frame
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = shadowBlur;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 15;

    // Draw the frame
    ctx.fillStyle = frameColor;
    ctx.fillRect(
        imgX - frameWidth,
        imgY - frameWidth,
        imgW + 2 * frameWidth,
        imgH + 2 * frameWidth
    );
     // Add a subtle inner bevel/highlight to frame
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.lineWidth = 2;
    ctx.strokeRect(
        imgX - frameWidth + 1,
        imgY - frameWidth + 1,
        imgW + 2 * frameWidth - 2,
        imgH + 2 * frameWidth - 2
    );

    // Turn off shadow for the actual image drawing
    ctx.shadowColor = 'transparent';

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, imgX, imgY, imgW, imgH);
    
    ctx.restore(); // Restore context to pre-transformation state

    return canvas;
}