// wybranie elementu <canvas>
var myCanvas = document.getElementById('myCanvas');
 
// sprawdzenie czy można pobrać kontekst
if (myCanvas.getContext) {
  // pobranie "kontekstu 2d"
  var ctx = myCanvas.getContext('2d');
  if (ctx) {
    // wczytanie obrazka
 
  // stworzenie nowego obrazka
  var img = new Image();
  // okreslenie adresu
 
  img.src = '/examples/canvas1/mini.jpg';
  // stworzenie zdarzenie wywołanego po wczytaniu obrazka
  img.addEventListener('load', function () {
 
    // rysuj obrazek rozpoczynajac od wspolrzednych 0,0 pola canvas
    ctx.drawImage(this, 0,0, 150, 150);

   // Get the pixels.
    var imgd = ctx.getImageData(0, 0, 150, 150);
    var imgd2 = ctx.getImageData(0, 0, 150, 150);
    var imgd3 = ctx.getImageData(0, 0, 150, 150);

  // -------------------------

   var pix = imgd.data; 
   for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i  ] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // red
      pix[i+1] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // green
      pix[i+2] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // blue
      // i+3 is alpha (the fourth element)
    }
    ctx.putImageData(imgd, 150, 0);

  // -------------------------

   var pix = imgd2.data;
   for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i  ] = 255 - pix[i  ]; // red
      pix[i+1] = 255 - pix[i+1]; // green
      pix[i+2] = 255 - pix[i+2]; // blue
      // i+3 is alpha (the fourth element)
    }
    ctx.putImageData(imgd2, 300, 0);

  // -------------------------

   var pix = imgd3.data;

   for (var i = 0, n = pix.length; i < n; i += 4) {
	  if(i<15000 || i> 75000){
      pix[i  ] = 25+pix[i]/2+pix[i+1]/5; // red
      pix[i+1] = 25+pix[i+1]/2+pix[i+2]/5 ; // green
      pix[i+2] = 25+pix[i+2]/2+pix[i]/2; // blue
	  }
	  else
	  {
      pix[i  ] = pix[i]; // red
      pix[i+1] = pix[i+1]/2+50 ; // green
      pix[i+2] = pix[i+2]/2+40; // blue
	  }
    }
    ctx.putImageData(imgd3, 450, 0);

  // -------------------------

  }, false);
 
  }
}