var stats = new Stats();
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
var smallcanvas = document.createElement('canvas');
var smallctx = smallcanvas.getContext('2d');
smallcanvas.width = 256; smallcanvas.height = 256;
var canvasHeight = smallcanvas.height;
var canvasWidth  = smallcanvas.width;
var imageData = smallctx.getImageData(0, 0, canvasWidth, canvasHeight);

var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data = new Uint32Array(buf);

Math.clip = function(number, min, max) {
  return Math.max(min, Math.min(number, max));
}

function pset(x, y, color) { //color object with properties a, r, g, b
  //buffer overflows are quite costly. so we check to make sure the point is on the canvas 
if(x > 0 && x < canvasWidth){
  if(y > 0 && y < canvasHeight){
    data[y * canvasWidth + x] =
      (color.a << 24) |    // alpha
      ((color.b) << 16) |    // blue
      ((color.g) <<  8) |    // green
      (color.r);            // red
  }
}
      
};

function line(x1, y1, x2, y2, color){
  
   var dy = y2 - y1;
    var dx = x2 - x1;
    var stepx, stepy;

    if (dy < 0) { dy = -dy;  stepy = -1; } else { stepy = 1; }
    if (dx < 0) { dx = -dx;  stepx = -1; } else { stepx = 1; }
    dy <<= 1;        // dy is now 2*dy
    dx <<= 1;        // dx is now 2*dx

    pset(x1,y1, color);
    if (dx > dy) 
    {
        var fraction = dy - (dx >> 1);  // same as 2*dy - dx
        while (x1 != x2) 
        {
           if (fraction >= 0) 
           {
               y1 += stepy;
               fraction -= dx;          // same as fraction -= 2*dx
           }
           x1 += stepx;
           fraction += dy;              // same as fraction -= 2*dy
           pset(x1, y1, color);
        };
     } else {
        fraction = dx - (dy >> 1);
        while (y1 != y2) {
           if (fraction >= 0) {
               x1 += stepx;
               fraction -= dy;
           }
           y1 += stepy;
           fraction += dx;
           pset(x1, y1, color);
        }
     }
  
};

function circle(xm, ym, r, color){
     var x = -r, y = 0, err = 2-2*r; /* II. Quadrant */ 
     do {
       
        
        pset(xm-x, ym+y, color); /*   I. Quadrant */
        pset(xm-y, ym-x, color); /*  II. Quadrant */
        pset(xm+x, ym-y, color); /* III. Quadrant */
        pset(xm+y, ym+x, color); /*  IV. Quadrant */
        r = err;
        if (r <= y) err += ++y*2+1;           /* e_xy+e_y < 0 */
        if (r > x || err > y) err += ++x*2+1; /* e_xy+e_x > 0 or no 2nd y-step */
     } while (x < 0);
  };

function fillCircle(xm,ym,r,color){
var x = -r, y = 0, err = 2-2*r; /* II. Quadrant */ 
     do {
       
        line(xm-x, ym-y, xm+x, ym-y, color);
        line(xm-x, ym+y, xm+x, ym+y, color);
        r = err;
        if (r <= y) err += ++y*2+1;           /* e_xy+e_y < 0 */
        if (r > x || err > y) err += ++x*2+1; /* e_xy+e_x > 0 or no 2nd y-step */
     } while (x < 0);
}

function rect(x1, y1, x2, y2, color){
  line(x1, y1, x2, y1, color);
  line(x2, y1, x2, y2, color);
  line(x1, y2, x2, y2, color);
  line(x1, y2, x1, y1, color);
};

function fillRect(x1, y1, x2, y2, color){
  var i = Math.abs(y2 - y1);
  line(x1, y1, x2, y1, color);
  while(--i){
    line(x1, y1+i, x2, y1+i, color);
  }
  line(x1,y2, x2, y2, color);
}

var 
    num = 100,
    m = 0, 
    c = 0,
    s = 0,
    cc = 0, ss = 0;
    color1 = 0,
    color2 = 0,
    i = 0,
    cx = 0, cy = 0,
    dx = 0, dy = 0,
    x1 = 0, x2 = 0,
    y1 = 0, y2 = 0,
    cir = [];

//i = 50; 

//console.log(cir);
var loop = function(){
  
  stats.begin();
  
  m += .01;
    
//rendering
for(var x = 0; x < canvasWidth; x++){
  for(var y = 0; y < canvasHeight; y++ ){
    var value = x * y & 0xff;
    pset(x,y, {r:0, g:0, b:value, a:255})
  }
}  
i = num;
  while(--i){ 
    //yellow lines
    c = Math.floor(Math.cos(m+i) * 127);
    s = Math.floor(Math.sin(m+i) * 127);
    line(128+s,128+c,128-s,128-c, { r:255, g:200, b:0, a:255 }); 
  }
  
rect(64,64,128+64, 128+64, { r:255, g:0, b:20, a:255 });

circle(127,127,32, { r:254, g:254, b:254, a:255 });

imageData.data.set(buf8);
smallctx.putImageData(imageData, 0, 0);
ctx.drawImage(smallcanvas, 0,0, 255, 255, 0,0, 767, 767);
  
stats.end();
requestAnimationFrame(loop);
}
loop();