Image Collection Of Cars

function processImage(originalImg, carCount = 12, backgroundColor = '#e0f7fa') {
    // This function ignores the originalImg and generates a collection of car illustrations.

    /**
     * Helper function to draw a single stylized car.
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     * @param {number} x - The x-coordinate for the top-left of the car's body.
     * @param {number} y - The y-coordinate for the top-left of the car's body.
     * @param {string} color - The fill color for the car's body.
     */
    function drawCar(ctx, x, y, color) {
        ctx.save();

        // Set consistent outline style
        ctx.strokeStyle = '#212121';
        ctx.lineWidth = 2;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';

        // Car Body and Cabin shape
        ctx.beginPath();
        // Start at front bumper bottom
        ctx.moveTo(x, y + 25);
        // Curve up to hood
        ctx.quadraticCurveTo(x, y, x + 10, y);
        // Hood
        ctx.lineTo(x + 25, y);
        // Windshield
        ctx.lineTo(x + 40, y - 20);
        // Roof
        ctx.lineTo(x + 70, y - 20);
        // Rear window
        ctx.lineTo(x + 85, y);
        // Trunk
        ctx.lineTo(x + 100, y);
        // Curve down to rear bumper
        ctx.quadraticCurveTo(x + 110, y, x + 110, y + 25);
        // Bottom of car
        ctx.lineTo(x, y + 25);
        ctx.closePath();

        ctx.fillStyle = color;
        ctx.fill();
        ctx.stroke();

        // Windows
        ctx.fillStyle = '#b3e5fc'; // Light blue for windows
        ctx.beginPath();
        // Front window
        ctx.moveTo(x + 42, y - 18);
        ctx.lineTo(x + 55, y - 18);
        ctx.lineTo(x + 55, y - 2);
        ctx.lineTo(x + 30, y - 2);
        ctx.closePath();
        // Rear window
        ctx.moveTo(x + 58, y - 18);
        ctx.lineTo(x + 68, y - 18);
        ctx.lineTo(x + 80, y - 2);
        ctx.lineTo(x + 58, y - 2);
        ctx.closePath();

        ctx.fill();
        ctx.stroke();

        // Wheels
        const wheelY = y + 28;
        ctx.fillStyle = '#424242';
        // Front wheel
        ctx.beginPath();
        ctx.arc(x + 30, wheelY, 12, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
        // Rear wheel
        ctx.beginPath();
        ctx.arc(x + 80, wheelY, 12, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();

        // Hubcaps
        ctx.fillStyle = '#e0e0e0';
        ctx.strokeStyle = "#616161";
        ctx.lineWidth = 1;
        // Front hubcap
        ctx.beginPath();
        ctx.arc(x + 30, wheelY, 5, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
        // Rear hubcap
        ctx.beginPath();
        ctx.arc(x + 80, wheelY, 5, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();

        ctx.restore();
    }

    // --- Main Logic ---

    // Ensure carCount is a sane number
    const count = Math.max(0, Math.min(100, carCount));

    // Define layout constants
    const CANVAS_WIDTH = 800;
    const COLS = 4;
    const CAR_WIDTH = 110;
    const CAR_HEIGHT = 75; // Approx bounding box height
    const TOP_MARGIN = 100;
    const PADDING_X = (CANVAS_WIDTH - COLS * CAR_WIDTH) / (COLS + 1);
    const PADDING_Y = 50;

    // Calculate dynamic canvas height
    const rows = count > 0 ? Math.ceil(count / COLS) : 1;
    const canvasHeight = TOP_MARGIN + rows * (CAR_HEIGHT + PADDING_Y);

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

    // Draw background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw title
    ctx.fillStyle = '#004d40';
    ctx.font = 'bold 48px "Arial", sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Car Collection', canvas.width / 2, 60);

    // Color palette for cars
    const colors = [
        '#d32f2f', '#1976d2', '#388e3c', '#fbc02d', '#7b1fa2', '#f57c00',
        '#e64a19', '#00796b', '#c2185b', '#546e7a', '#eeeeee', '#424242'
    ];

    // Draw the collection of cars
    for (let i = 0; i < count; i++) {
        const col = i % COLS;
        const row = Math.floor(i / COLS);

        const x = PADDING_X + col * (CAR_WIDTH + PADDING_X);
        const y = TOP_MARGIN + row * (CAR_HEIGHT + PADDING_Y);
        const color = colors[i % colors.length];

        drawCar(ctx, x, y, color);
    }

    return canvas;
}