Image Of A School

/**
 * Creates a cartoonish drawing of a school building.
 * This function does not use the input image but instead generates a new image from scratch.
 * @param {Image} originalImg - An Image object, which is ignored in this function.
 * @returns {HTMLCanvasElement} A canvas element with the drawing of a school.
 */
function processImage(originalImg) {
    // 1. Create a canvas element and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const width = 500;
    const height = 400;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 2. Draw the background (sky and grass).
    // Sky
    ctx.fillStyle = '#87CEEB'; // Sky Blue
    ctx.fillRect(0, 0, width, height);

    // Sun
    ctx.fillStyle = '#FFD700'; // Gold
    ctx.beginPath();
    ctx.arc(width - 60, 60, 30, 0, Math.PI * 2, true);
    ctx.fill();

    // Grass
    ctx.fillStyle = '#4CAF50'; // A pleasant shade of green
    ctx.fillRect(0, height - 100, width, 100);

    // 3. Draw the school building.
    // Main building structure
    ctx.fillStyle = '#F5DEB3'; // Wheat color for the walls
    ctx.fillRect(100, 150, 300, 150);
    ctx.strokeStyle = '#D2B48C'; // Tan for a subtle outline
    ctx.lineWidth = 2;
    ctx.strokeRect(100, 150, 300, 150);

    // Roof
    ctx.fillStyle = '#A52A2A'; // A classic brown/red for the roof
    ctx.beginPath();
    ctx.moveTo(80, 150);
    ctx.lineTo(250, 50);
    ctx.lineTo(420, 150);
    ctx.closePath();
    ctx.fill();

    // Front gable detail to give a 3D feel
    ctx.fillStyle = '#F5DEB3';
    ctx.beginPath();
    ctx.moveTo(100, 150);
    ctx.lineTo(250, 75);
    ctx.lineTo(400, 150);
    ctx.closePath();
    ctx.fill();
    ctx.stroke(); // Use the existing tan stroke settings

    // Door
    ctx.fillStyle = '#8B4513'; // Saddle Brown
    ctx.fillRect(225, 230, 50, 70);
    // Doorknob
    ctx.fillStyle = '#FFD700'; // Gold
    ctx.beginPath();
    ctx.arc(265, 265, 4, 0, Math.PI * 2, true);
    ctx.fill();

    // Windows with panes
    const drawWindow = (x, y) => {
        ctx.fillStyle = '#ADD8E6'; // Light Blue for glass
        ctx.fillRect(x, y, 40, 40);
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x + 20, y); // Vertical pane
        ctx.lineTo(x + 20, y + 40);
        ctx.moveTo(x, y + 20); // Horizontal pane
        ctx.lineTo(x + 40, y + 20);
        ctx.stroke();
    };

    drawWindow(130, 180);
    drawWindow(330, 180);

    // Clock
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(250, 115, 20, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();
    // Clock hands (set to 9:00)
    ctx.beginPath();
    ctx.moveTo(250, 115); // Center
    ctx.lineTo(250, 100); // Minute hand to 12
    ctx.moveTo(250, 115); // Center
    ctx.lineTo(238, 115); // Hour hand to 9
    ctx.stroke();
    
    // "SCHOOL" text above the door
    ctx.fillStyle = '#4A4A4A';
    ctx.font = "bold 20px 'Arial', sans-serif";
    ctx.textAlign = 'center';
    ctx.fillText('SCHOOL', 250, 220);

    // 4. Return the completed canvas.
    return canvas;
}