Array loop for an object

Question

Hey again i'I've been here before. My question is, I've been tasked with creating a HTML canvas drawing of a House using, Rects, lineTo, moveTo etcc. I've created the house into a separate JavaScript file and turned it into a an object to be called on my Main canvas page.

However when I had originally created the house it was all within the canvas.js file which made creating a loop to fill the canvas with this house easy.

what I have to do now is replicate this loop to fill the canvas up with houses in a 5*3 manner (this will fill my entire canvas). What I've done so far is this;

how can i turn this Hunk of code into a loop to draw the houses in a 5*3 grid? P.S the name House is the house drawing object in another JavaScript file.

        houses = new Array();
        //Columns
        houses.push(new House(0,100,"#ff0000"));
        houses.push(new House(0,310,"#ff0000"));
        houses.push(new House(0,520,"#ff0000"));
        //row1
        houses.push(new House(160,100,"#ff0000"));
        houses.push(new House(320,100,"#ff0000"));
        houses.push(new House(480,100,"#ff0000"));
        houses.push(new House(640,100,"#ff0000"));
        //row2
        houses.push(new House(160,310,"#ff0000"));
        houses.push(new House(320,310,"#ff0000"));
        houses.push(new House(480,310,"#ff0000"));
        houses.push(new House(640,310,"#ff0000"));
        //row3
        houses.push(new House(160,520,"#ff0000"));
        houses.push(new House(320,520,"#ff0000"));
        houses.push(new House(480,520,"#ff0000"));
        houses.push(new House(640,520,"#ff0000"));  
    }

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

        for(var i =0; i < houses.length; i+=1){
            houses[i].draw(context);
        }
    }

    initialise();
    draw();
}

My original code loop before I had to put the house drawing function as an object;

var drawGreen = false;
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,drawGreen);
            drawGreen = !drawGreen;
        }
    }
};

I can see how it would work however, i think what i'm failing to understand is this whole creating the house as an object in another file and calling it instead of just building the house within the same file. — Ben Connor Hansell
– Ben Connor Hansell, Commented Nov 6, 2013 at 20:57
if you could help explain this part, because this was the part which wasn't explained in my lecture. — Ben Connor Hansell
– Ben Connor Hansell, Commented Nov 6, 2013 at 21:25
I've figured it out now :D! i can;'t post my answer here because i don't have enough rep? — Ben Connor Hansell
– Ben Connor Hansell, Commented Nov 6, 2013 at 21:38

GameAlchemist · Accepted Answer · 2013-11-03 13:43:50Z

You can use the canvas's translate and scale to have your canvas filled with a house that you'll replicate.

let's assume your draws all starts at (0,0), have x>0, y>0, and have a drawWidth and drawHeight you can compute.
Then you might use something like this to draw it on the canvas at position (xShift, yShift), with size (tgtWidth, tgtHeight) :

 function retargetDraw (ctx, drawFunc, drawWidth, drawHeight, 
                                xShift, yShift, tgtWidth, tgtHeight) {

      var needScaling = ((drawWidth != tgtWidth) || (drawHeight != tgtHeight));
      ctx.save();
      ctx.translate(xShift, yShift);
      if (needScaling) {
          ctx.scale( tgtWidth/drawWidth, tgtHeight/drawHeight );                
      }
      drawFunc();
      ctx.restore();
  }

Rq : if image is never scaled, you can remove tgtWidth/tgtHeight, or you can make them optional with :

tgtWidth  = tgtWidth  || drawWidth  ;
tgtHeight = tgtHeight || drawHeight ;

Collectives™ on Stack Overflow

Array loop for an object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related