canvas - minecraft-esque random pixel colors

by Amanda Williamson

HTML

<canvas id="canvas" height="200" width="200"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x1, y1, x2, y2;

//top - green
for(x1 = 0; x1 < 200; x1 += 10) {
  for (y1 = 0; y1 < 40; y1 += 10) {
    ctx.moveTo(x1,y1);
    ctx.fillStyle = getRandomGreen();
    ctx.fillRect(x1,y1,10,10);
  }
}

//bottom - brown
for(x2 = 0; x2 < 200; x2 += 10) {
  for (y2 = 40; y2 < 200; y2 += 10) {
    ctx.moveTo(x2,y2);
    ctx.fillStyle = getRandomBrown();
    ctx.fillRect(x2,y2,10,10);
  }
}

function getRandomGreen() {
    var greens = ['#006600', '#009933', '#339933', '#4D944D', '#66A366'];
    return greens[Math.floor(Math.random() * greens.length)];
}

function getRandomBrown() {
    var browns = ['#663300', '#754719', '#5C2E00', '#996633', '#AD855C'];
    return browns[Math.floor(Math.random() * browns.length)];
}