javascript - 他のすべての家のドアを緑色にしようとしている

Question

私の仕事は、家を描いてから、ループ (下部) を使用してキャンバスを家で埋めることです。手動で家を配置するのではありません。

さて、私は他のすべての家のドアを緑にする方法に取り組んでいます. 私はしばらくコードをハックしようとしていますが、理解できません。

私は家のすべての部分が機能している必要があることを知っていますが、それは私がやっている仕事の後のタスクです! これが私のコードです：

//Check to see if the browser supports
//the addEventListener function
if(window.addEventListener)
{
    window.addEventListener
    (
        'load', //this is the load event
        onLoad, //this is the evemnt handler we going to write
        false //useCapture boolen value
    );
}

//the window load event handler
function onLoad()
{
    var canvas;     
    var context;


    //this function will intialise our variables
    function initialise()
    {


        // Fune the canvas element using its id attribute.
        canvas = document.getElementById('canvas');
        //if it couldn't be found
        if (!canvas)
        {
            //make a message bok appear with an error message
            alert('Error: i cannot find this "canvas" of which you speak. Please re-evaluate your life choices.');
            return;
        }
        //check if there is any getContext function
        if(!canvas.getContext)
        {
            alert('Error no cavnas.getContext could be found');
            return;
        }
        //get the 2D canvas context.
        context = canvas.getContext('2d');
        if(!context)
        {
            alert('Error failed to getCOntext');
            return;
        }

        canvas.addEventListener("mousedown", getPosition, false);
    }

    // this is a little help tool for me as i'm awful at working out co-ordinates
    function getPosition(e)
    {
        var x = e.x;
        var y = e.y;
        x -=canvas.offsetLeft;
        y -=canvas.offsetTop;
        alert("x:" +x+ "y:"+y);
    }

    //this function will draw on the canvas for me!
    function draw()
    {
        context.fillStyle = 'grey';
        context.fillRect(0, 0, canvas.width, canvas.height);
    }


    // pX and pY are the parameters are going to be used so that the inside of the house body becomes the drawing canvas.
    function drawHouse(pX ,pY)
    {
        //body
        context.beginPath();
        context.fillStyle = '#ffffff';
        context.strokeStyle = "black";
        context.lineWidth = "5";
        context.rect(pX,pY, 160,110);
        context.closePath();
        context.fill();
        context.stroke();

        //roof
        context.beginPath();
        context.fillStyle = "red";
        context.moveTo(pX,pY-1);;
        context.lineTo(pX+80, pY-95);
        context.lineTo(pX+160, pY-1);
        context.closePath();
        context.fill();
        context.stroke();

        //door 
        context.beginPath();
        context.fillStyle = "green";
        context.fillSStyle = "red";
        context.strokeStyle = "black";
        context.rect(pX+55,pY+30, 50, 80);
        context.fill();
        context.stroke();

        //handle
        var radius = 5;
        context.beginPath();
        context.arc(pX+93, pY+75, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'purple';
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = 'black';
        context.stroke();

        //window Left
        context.beginPath();
        context.fillStyle = 'blue';
        context.strokeStyle = "black";
        context.rect(pX+12,pY+30, 30, 60);
        context.fill();
        context.stroke();

        //window Filler left vertically
        context.beginPath();
        context.moveTo(pX+26.5,pY+30);
        context.lineTo(pX+26.5, pY+90);
        context.fill();
        context.stroke();

        //Window filler left horizontally
        context.beginPath();
        context.moveTo(pX+41, pY+60);
        context.lineTo(pX+11,pY+60);
        context.fill();
        context.stroke();

        //Window Right
        context.beginPath();
        context.fillStyle = 'blue';
        context.strokeStyle = "black";
        context.rect(pX+117,pY+30, 30, 60);
        context.fill();
        context.stroke();

        //window filler right vertically
        context.beginPath();
        context.moveTo(pX+131.5,pY+30);
        context.lineTo(pX+131.5, pY+90);
        context.fill();
        context.stroke();

        //window Filler right horizontally
        context.beginPath();
        context.moveTo(pX+147, pY+60);
        context.lineTo(pX+117,pY+60);
        context.fill();
        context.stroke();
    }

    initialise();
    draw();
    for(var i=0; i < 5; i++)
    {
        var pX=0+160*i;

        for(var b=0; b < 5; b++)
        {
            var pY=100+210*b;
            drawHouse(pX,pY);
        }
    }
}