http://jsfiddle.net/B1KMusic/xf7De/

It generates a map of random colors up to 10 000 x 10 000 pixels without making the browser lag.

I spent extra time making the settings easy to understand.

You can mess around with the settings, change the size of the image, change the pixel size, and the color channel ratios, and the picture renders before your eyes, and if you like it, you can click it and save it. It can crash trying to save huge pictures, though.

Tip: In firefox, set the image size to your screen resolution, pixel size to 1, and the color channels to:

R: 0x00
G: 0x77
B: 0x00

Instant grass!

For more realistic grass, some blue should be included:

R: 0x00
G: 0x77
B: 0x33 <-- Since dark blue is kinda the color of grass shadow, this actually makes it a little more realistic

Chrome renders fast
Firefox can save massive pictures that would kill the page on chrome
IE9 works
Safari works about the same as chrome
Haven't tested Opera

Picture below is a 1280x800 "grass" picture I rendered in firefox.

Technical details:

The way it progressively renders is through the use of setTimeout and anonymous functions.

((function renderY(i){
__if(i < H){
____((function renderX(j){
______if(j < W){
________for(var k = 0; k < 100; k ++){
__________context.fillStyle = randomColor();
__________context.fillRect(j,i,1,1);
__________j++;
________}
________setTimeout(function(){renderX(j)},0)
______}
____})(j));
____i++;
____setTimeout(function(){renderY(i)},0);
__}
})(-1));