element = document.getElementById "canvas1"
c = element.getContext "2d"

width = parseInt element.getAttribute "width"
height = parseInt element.getAttribute "height"

imageData = c.createImageData width, height;

###

###

randomAndMultiplyBy = (mul) -> parseInt Math.random() * mul
randomFilter = ({r, g, b, a}) ->
  r = randomAndMultiplyBy 256
  g = randomAndMultiplyBy 256
  b = randomAndMultiplyBy 256
  color = {r, g, b, a: 0xff}

class Pixel
  constructor: (@imageData, @width, @height) ->
    @itemsPerX = 4
    @imgData = @imageData.data
    return this
  getPixelAt: ({x, y}) ->
    i = @getIndexAt x, y
    r = @imgData[i+0]
    g = @imgData[i+1]
    b = @imgData[i+2]
    a = @imgData[i+3]
    return {r, g, b, a}
  getIndexAt: (x, y) -> (x + y * @width) * @itemsPerX
  setPixelAt: ({x, y}, data) ->
    i = @getIndexAt x, y
    @imgData[i+0] = data.r
    @imgData[i+1] = data.g
    @imgData[i+2] = data.b
    @imgData[i+3] = data.a
    return this
  drawCanvas: () ->
    totalPoint = @width * @height
    for x in [0...@width]
      for y in [0...@height]
        @setPixelAt {x, y}, randomFilter @getPixelAt {x, y}
    return this
  getCanvasData: () -> @imageData


p = new Pixel(imageData, width, height)
cdata = p.drawCanvas().getCanvasData()
console.log p.getPixelAt 0, 0
console.log width, height
# console.log p.drawCanvas()
c.putImageData cdata, 0, 0