Image To House Transformer

function processImage(originalImg, overlayColor = 'rgba(0, 0, 0, 0.4)', strokeColor = '#ffffff', strokeWidth = 5) {
    const canvas = document.createElement('canvas');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // House metrics
    const peakX = w * 0.5;
    const peakY = h * 0.05;
    const roofRight = w * 0.95;
    const roofLeft = w * 0.05;
    const roofBottom = h * 0.4;
    const wallRight = w * 0.85;
    const wallLeft = w * 0.15;
    const wallBottom = h * 0.95;

    // Define the house silhouette path
    const buildHousePath = () => {
        ctx.beginPath();
        ctx.moveTo(peakX, peakY); // Roof peak
        ctx.lineTo(roofRight, roofBottom); // Right eave
        ctx.lineTo(wallRight, roofBottom); // Right wall top
        ctx.lineTo(wallRight, wallBottom); // Right wall bottom
        ctx.lineTo(wallLeft, wallBottom); // Left wall bottom
        ctx.lineTo(wallLeft, roofBottom); // Left wall top
        ctx.lineTo(roofLeft, roofBottom); // Left eave
        ctx.closePath();
    };

    // 1. Clip the image into the house shape
    ctx.save();
    buildHousePath();
    ctx.clip();
    ctx.drawImage(originalImg, 0, 0, w, h);
    ctx.restore();

    // 2. Setup styling for overlays
    ctx.lineWidth = Number(strokeWidth);
    ctx.strokeStyle = strokeColor;
    ctx.fillStyle = overlayColor;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';

    // 3. Draw outline of the house
    buildHousePath();
    ctx.stroke();

    // 4. Draw roof base line
    ctx.beginPath();
    ctx.moveTo(wallLeft, roofBottom);
    ctx.lineTo(wallRight, roofBottom);
    ctx.stroke();

    // 5. Draw Door
    const dw = w * 0.16;
    const dh = h * 0.28;
    const dx = w / 2 - dw / 2;
    const dy = wallBottom - dh;
    
    ctx.fillRect(dx, dy, dw, dh);
    ctx.strokeRect(dx, dy, dw, dh);

    // Door knob
    ctx.beginPath();
    ctx.arc(dx + dw * 0.8, dy + dh * 0.55, Math.max(w * 0.015, 2), 0, Math.PI * 2);
    ctx.fillStyle = strokeColor;
    ctx.fill();

    // Reset fill style for windows
    ctx.fillStyle = overlayColor;

    // 6. Draw Windows
    const ww = w * 0.18;
    const wh = h * 0.18;
    const wx1 = w * 0.3 - ww / 2;
    const wx2 = w * 0.7 - ww / 2;
    const wy = h * 0.52;
    
    // Window 1 (Left)
    ctx.fillRect(wx1, wy, ww, wh);
    ctx.strokeRect(wx1, wy, ww, wh);
    
    // Window 2 (Right)
    ctx.fillRect(wx2, wy, ww, wh);
    ctx.strokeRect(wx2, wy, ww, wh);

    // Window panes (Crosses inside the windows)
    ctx.beginPath();
    
    // Left window cross
    ctx.moveTo(wx1 + ww / 2, wy);
    ctx.lineTo(wx1 + ww / 2, wy + wh);
    ctx.moveTo(wx1, wy + wh / 2);
    ctx.lineTo(wx1 + ww, wy + wh / 2);

    // Right window cross
    ctx.moveTo(wx2 + ww / 2, wy);
    ctx.lineTo(wx2 + ww / 2, wy + wh);
    ctx.moveTo(wx2, wy + wh / 2);
    ctx.lineTo(wx2 + ww, wy + wh / 2);
    
    ctx.stroke();

    return canvas;
}