Image Of A House

/**
 * Generates an image of a house on a canvas.
 * This function ignores the input image and draws a new scene.
 *
 * @param {HTMLImageElement} originalImg - An input image object (unused in this function).
 * @param {number} width - The width of the output canvas.
 * @param {number} height - The height of the output canvas.
 * @param {string} houseColor - The color of the house walls (e.g., '#d2b48c').
 * @param {string} roofColor - The color of the roof (e.g., '#a52a2a').
 * @param {string} doorColor - The color of the door (e.g., '#8b4513').
 * @param {string} skyColor - The color of the sky (e.g., '#87ceeb').
 * @param {string} grassColor - The color of the grass (e.g., '#4caf50').
 * @returns {HTMLCanvasElement} A canvas element with a drawing of a house.
 */
function processImage(originalImg, width = 400, height = 400, houseColor = '#d2b48c', roofColor = '#a52a2a', doorColor = '#8b4513', skyColor = '#87ceeb', grassColor = '#4caf50') {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Draw sky
    ctx.fillStyle = skyColor;
    ctx.fillRect(0, 0, width, height);

    // Draw sun
    ctx.fillStyle = '#ffeb3b';
    ctx.beginPath();
    ctx.arc(width * 0.8, height * 0.2, width * 0.1, 0, Math.PI * 2, true);
    ctx.fill();

    // Draw grass
    const groundLevel = height * 0.75;
    ctx.fillStyle = grassColor;
    ctx.fillRect(0, groundLevel, width, height - groundLevel);

    // House dimensions
    const houseWidth = width * 0.5;
    const houseHeight = height * 0.4;
    const houseX = (width - houseWidth) / 2;
    const houseY = groundLevel - houseHeight;

    // Draw house base
    ctx.fillStyle = houseColor;
    ctx.fillRect(houseX, houseY, houseWidth, houseHeight);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.strokeRect(houseX, houseY, houseWidth, houseHeight);


    // Draw roof
    const roofHeight = houseHeight * 0.6;
    ctx.fillStyle = roofColor;
    ctx.beginPath();
    ctx.moveTo(houseX - 20, houseY); // Left eaves
    ctx.lineTo(houseX + houseWidth / 2, houseY - roofHeight); // Peak
    ctx.lineTo(houseX + houseWidth + 20, houseY); // Right eaves
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    // Draw door
    const doorWidth = houseWidth * 0.25;
    const doorHeight = houseHeight * 0.45;
    const doorX = houseX + houseWidth / 2 - doorWidth / 2;
    const doorY = groundLevel - doorHeight;
    ctx.fillStyle = doorColor;
    ctx.fillRect(doorX, doorY, doorWidth, doorHeight);
    ctx.strokeRect(doorX, doorY, doorWidth, doorHeight);

    // Draw doorknob
    ctx.fillStyle = '#ffd700'; // Gold color
    ctx.beginPath();
    ctx.arc(doorX + doorWidth * 0.8, doorY + doorHeight / 2, 3, 0, Math.PI * 2, true);
    ctx.fill();

    // Draw window
    const windowSize = houseWidth * 0.2;
    const windowX = houseX + houseWidth * 0.15;
    const windowY = houseY + houseHeight * 0.2;
    ctx.fillStyle = '#add8e6'; // Light blue for window pane
    ctx.fillRect(windowX, windowY, windowSize, windowSize);
    ctx.strokeRect(windowX, windowY, windowSize, windowSize);

    // Window panes
    ctx.beginPath();
    ctx.moveTo(windowX, windowY + windowSize / 2);
    ctx.lineTo(windowX + windowSize, windowY + windowSize / 2);
    ctx.moveTo(windowX + windowSize / 2, windowY);
    ctx.lineTo(windowX + windowSize / 2, windowY + windowSize);
    ctx.stroke();

    return canvas;
}