W = 256
H = 256

// This will add a new canvas element to this page
canvas = document.createElement('canvas')
canvas.setAttribute('width',  W.toString())
canvas.setAttribute('height', H.toString())
ctxt = canvas.getContext('2d')
$('playArea').appendChild(canvas)

color  = function(r, g, b) { return 'rgb(' + r + ',' + g + ',' + b + ')' }
pset   = function(x, y, c) { ctxt.fillStyle = c; ctxt.fillRect(x, y, 1, 1) }

// color caching (doesn't help the example below, b/c there are no repeated colors)
mcolor = function(r, g, b) {
  if (mcolor.cache[r] == undefined)
    mcolor.cache[r] = []
  if (mcolor.cache[r][g] == undefined)
    mcolor.cache[r][g] = []
  if (mcolor.cache[r][g][b] == undefined)
    mcolor.cache[r][g][b] = 'rgb(' + r + ',' + g + ',' + b + ')'
  return mcolor.cache[r][g][b]
}
mcolor.cache = []

for (var x = 0; x < W; x++)
  for (var y = 0; y < H; y++)
     pset(x, y, mcolor(y, Math.round((x + y) / 2), x))