[Old Pedant]

Originally Posted by donna1

Ive already rewritten it in perfect javascript lol

var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++){
 for(y=0; y < map[x].length; y++){

    if(parseInt(map[x][y])==1){
	context.drawImage(grass,x*25,y*25);}
    else{
        context.drawImage(cement,x*25,y*25);}

 }
}

That's very close to what I was going to do.

A little more efficient:

var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++)
{
    var line = map[x];
    for(y=0; y < line.length; y++)
    {
	context.drawImage( line[y] == "1" ? grass : cement  x*25, y*25);
    }
}

No reason to parseInt() the "1"/"0" value. Just compare the cell contents to a string instead of a number!

In x*25 and y*25: naturally, the 25's there need to match the actual height (x) and width (y) of the image.

Which suggests that for clarity we should swap the usage of x and y.