Jako obraz poglądowy wybrałem jedno z moich zdjęć:

Spróbujmy najpierw stworzyć obiekt canvas, nadać mu identyfikator oraz po prostu wczytać do niego obrazek.

<canvas id="myCanvas" width="600" height="150">Brak obsługi Canvas</canvas>

// 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) {
 
  // 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);

Kolejnym krokiem jest wczytanie informacji o pliku. Chcę stworzyć 3 modyfikacje mojego zdjęcia więc robię to trzykrotnie.

   // Get the pixels.
    var imgdata = ctx.getImageData(0, 0, 150, 150);
    var imgdata2 = ctx.getImageData(0, 0, 150, 150);
    var imgdata3 = ctx.getImageData(0, 0, 150, 150);

Spróbujmy wykonać pierwsze przekształcenie polegające na konwersji zdjęcia do palety szarości.

   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]; // czerwony
      pix[i+1] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // zielony
      pix[i+2] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // niebieski
    }
    ctx.putImageData(imgdata, 150, 0);

Krótkie wytłumaczenie:
Najpierw została pobrana tablica pikseli. Sposób zapisu danych na ich temat jest troszkę nietypowy. Każdy piksel jest mieszaniną trzech(czerwony, zielony, niebieski) kolorów oraz współczynnika przezroczystości. Dlatego, nasza tablica posiada 90 tys. elementów(150x150x4). Skacząc w pętli co cztery elementy, za każdym razem otrzymujemy nowy piksel do przebadania. Każdy z nich jest przekształcany na jeden z odcieni szarości. Na końcu obraz jest umieszczany w miejscu o współrzędnych 150,0(pierwszych 150 pikseli zajmuje nieprzekształcone zdjęcie, które umieściliśmy już wcześniej.

Spróbujmy odwrócić kolory:

 
   var pix = imgdata2.data;
   for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i] = 255 - pix[i]; // czerwony
      pix[i+1] = 255 - pix[i+1]; // zeilony
      pix[i+2] = 255 - pix[i+2]; // niebieski
    }
    ctx.putImageData(imgdata2, 300, 0);

Ostatnim przekształceniem będzie zabawa z kolorami . Wydzieliłem również pas pikseli, który będzie przekształcany w inny sposób. W ten sposób można tworzyć efekty punktowe(np. podświetlić na biało oczy).

   var pix = imgdata3.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; // czerwony
              pix[i+1] = 25+pix[i+1]/2+pix[i+2]/5 ; // zielony
              pix[i+2] = 25+pix[i+2]/2+pix[i]/2; // niebieski
	  }
	  else
	  {
              pix[i  ] = pix[i]; // czerwony
              pix[i+1] = pix[i+1]/2+50 ; //zielony
              pix[i+2] = pix[i+2]/2+40; // niebieski
	  }
    }
    ctx.putImageData(imgdata3, 450, 0);

Oczywiście musimy jeszcze uzupełnić parametry funkcji oraz zamknąć wszystkie nawiasy.

  }, false);
 
  }
}

Pamiętajmy jednak, że element canvas jest niedostepny w starszych przeglądarkach Internet Explorer. Jeśli się nie mylę dopiero 9 wersja zacznie go obsługiwać poprawnie.

Cały przykład dostępny w postaci pliku js: canvas.js

Efekt działania:
Brak obsługi Canvas

Rozpocznijmy od małej gry, którą napisałem przy użyciu jQuery na potrzeby tego artykułu. Polega ona na bardzo szybkim klikaniu w pojawiający się czerwony prostokąt. Dasz radę? Zagraj!

ClickJacking polega na — tłumacząc dosłownie — „porywaniu kliknięć“. Zasada jest prosta. Niewidzialna ramka jest ukrywana pod stroną za pomocą css(a dokładniej z-index). Czeka ona w tle, aż potencjalna ofiara zechce kliknąć w pewne pole na ekranie. Wtedy warstwa ramki przechodzi nad warstwę gry. Użytkownik myśląc, że klika w prawdziwy element w rzeczywistości uruchamia mechanizm z ramki. Brzmi niepozornie? Atak taki wykorzystywany jest na wiele sposobów. Można np. umieścić w ramcę stronę facebook.com oraz odpowiednio sprecyzować pola w które należy kliknąć. Dzięki temu użytkownik zmieni swoje ustawienia dotyczące prywatności umożliwiając kradzież swoich danych osobowych i możliwość przeglądania zdjęć. Wbrew pozorom są setki niezabezpieczonych stron internetowych. Jedną z nich była kiedyś witryna konfiguracyjna wtyczki flash. Odpowiednio sprecyzowana strona pozwalała na zmianę ustawieć wtyczki tak aby możliwy był dostęp do kamery internetowej(sic!). Dzięki temu hakerzy mogli nawet podglądać swoje ofiary. Na szczęście Adobe wprowadziło zabezpieczenia, które uniemożliwiają przeprowadzenie takiego ataku.

Jak się chronić?

Zwykli użytkownicy mogą zainstalować wtyczkę NoScript, która chroni przed tym atakiem. W przypadku twórców stron internetowych sprawa jest prosta. Nie wolno pozwalać uruchamiać naszej strony w ramce(tym bardziej, że ramki to już przestarzała technologia). Robi tak GMail, nasza-klasa, o2 i inni.
Kod(tzw. Framekiller) jest bardzo prosty:

<script type="text/javascript">
    if (top!=self){
        top.location.href=self.location.href;
    }
</script>

W przypadku uruchomienia strony w ramce strona nadrzędna zostanie przekierowana na stronę w ramce.