var canvas = document.getElementById('canvas');
var canvasWidth  = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

 //params for fractal renderer, next iteration add sliders/ inputs?

var xcorner = -2; 
var ycorner = -1.5;
var zoom = 3;

var data = imageData.data;

//I bet theres a faster way to do this
var plot = function(x,y,count){
     var index = (y * canvasWidth + x) * 4;
        data[index]   = count * 12 * -1 + 255;    // red
        data[++index] = count * 12 * -1 + 255;    // green
        data[++index] = count * 12 * -1 + 255;    // blue
        data[++index] = 255;      // alpha        
  };

//fractal rendering
for (var x = 1; x < canvasWidth; x++) {
    for (var y = 1; y < canvasHeight; y++) {
      var count = 0;
      var size = 0;
      var cx = xcorner + ((x * zoom) / canvasWidth);
      var cy = ycorner + ((y * zoom) / canvasHeight);

      var zx = 0;
      var zy = 0;

      while (count < 50 && size <= 4) {
        count += 1;
        temp = (zx * zx) - (zy * zy);
        zy = (2 * zx * zy) + cy;
        zx = temp + cx;
        size = (zx * zx) + (zy * zy);
      }

      plot(x, y, count); // count -for coloring
    }
ctx.putImageData(imageData, 0, 0);
}