Image Of A Prison Cell

async function processImage(originalImg, barColor = '#55585c', barCount = 6, barThicknessOverride = 0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is fully loaded to get correct dimensions.
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        await new Promise(resolve => {
            originalImg.onload = resolve;
            originalImg.onerror = resolve; // Also resolve on error to not hang forever
        });
    }

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Determine the thickness of the bars. Use override if provided, otherwise calculate based on image width.
    const barThickness = barThicknessOverride > 0 ? barThicknessOverride : Math.max(15, Math.round(width / 35));

    // 1. Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Apply a color filter to make the scene look more grim and desaturated.
    // A gray color with 'multiply' darkens and removes color saturation.
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = '#b0b0b0';
    ctx.fillRect(0, 0, width, height);
    // Reset composite operation to default for subsequent drawings.
    ctx.globalCompositeOperation = 'source-over';

    // 3. Helper function to draw a single prison bar with a 3D effect.
    const drawBar = (x, y, w, h, isVertical) => {
        // First, draw the solid base color of the bar.
        ctx.fillStyle = barColor;
        ctx.fillRect(x, y, w, h);

        // Create a gradient to simulate a rounded, metallic surface.
        let gradient;
        if (isVertical) {
            // A horizontal gradient for a vertically oriented bar.
            gradient = ctx.createLinearGradient(x, y, x + w, y);
        } else {
            // A vertical gradient for a horizontally oriented bar.
            gradient = ctx.createLinearGradient(x, y, x, y + h);
        }

        // The gradient simulates a highlight in the middle and shadows on the edges.
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
        gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.1)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.4)');
        gradient.addColorStop(0.7, 'rgba(255, 255, 255, 0.1)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0.5)');

        // Overlay the gradient on top of the base color.
        ctx.fillStyle = gradient;
        ctx.fillRect(x, y, w, h);

        // Add a subtle stroke for better definition against the background.
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.lineWidth = 1;
        ctx.strokeRect(x, y, w, h);
    };

    // 4. Draw the vertical bars, evenly spaced across the canvas.
    const verticalSpacing = width / (barCount + 1);
    for (let i = 1; i <= barCount; i++) {
        const barX = i * verticalSpacing - barThickness / 2;
        drawBar(barX, 0, barThickness, height, true);
    }

    // 5. Draw two horizontal bars for structural authenticity.
    const horizontalBars = 2;
    const horizontalSpacing = height / (horizontalBars + 1);
    for (let i = 1; i <= horizontalBars; i++) {
        const barY = i * horizontalSpacing - barThickness / 2;
        drawBar(0, barY, width, barThickness, false);
    }

    // 6. Add a vignette effect to darken the corners, enhancing the sense of confinement.
    const vignetteGradient = ctx.createRadialGradient(
        width / 2, height / 2, Math.min(width, height) * 0.25, // Inner circle
        width / 2, height / 2, Math.min(width, height) * 0.8 // Outer circle
    );
    vignetteGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    vignetteGradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)');
    ctx.fillStyle = vignetteGradient;
    ctx.fillRect(0, 0, width, height);

    return canvas;
}