[Old Pedant]

The beauty of this solution is that you could expand it to many types of "terrain".

Example:

var terrain {
   "g" : "grass.png",
   "c" : "cementjpg",
   "m" : "mountain.gif",
   "w" : "water.jpg",
   "t" : "town.png"
};

var map = [
    "mmmmmwwwww",
    "mmggcctttw",
    .... etc. ...
];

var cellWidth = 25;
var cellHeight = 25;

// replace strings with image objects:
for ( var c in terrain )
{
     var pic = new Image();
     pic.src = "new/" + terrain[c];
     pic.width = cellWidth; 
     pic.height = cellHeight;
     terrain[c] = pic; 
}
// draw terrain:
for( row=0; row < map.length; ++row)
{
    var line = map[row];
    for( column=0; column < line.length; ++column )
    {
        var image = terrain[ line[ column ] ];
	context.drawImage( image, column*cellWidth,  row*cellHeight );
    }
}