HTML5 Canvas

HTML5 Canvas — element języka HTML wprowadzony w HTML 5 pozwalający na dynamiczne, skryptowe renderowanie kształtów i obrazów bitmapowych. Dzięki wprowadzeniu obiektu canvas możliwe stało się tworzenie dynamicznych dwu- i trójwymiarowych animacji czy gier działających w przeglądarkach bez dodatkowych wtyczek.

Przykład

Przykładowy fragment kodu HTML5 wykorzystujący tag <canvas>. Jeżeli tag ten nie jest obsługiwany, wyświetli się wpisany tekst.

<canvas id="example" width="200" height="200">
Twoja przeglądarka nie obsługuje elementu Canvas.
</canvas>

Korzystając z języka JavaScript, można rysować na elemencie Canvas

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

Powyższy kod rysuje na ekranie czerwony prostokąt.

Kompatybilność z przeglądarkami

Element canvas jest obecnie obsługiwany przez takie przeglądarki jak: Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror i Opera.

Canvas fingerprinting

Element Canvas jest wykorzystywany do ustalenia tożsamości konkretnej przeglądarki za pomocą "odcisku palca", czyli informacji wysyłanej do serwera o parametrach rysowanego przez przeglądarkę kształtu. Kiedy przeglądarka użytkownika narysuje niewidoczny obrazek, tworzony jest identyfikator, który następnie przypisywany jest użytkownikowi w celu śledzenia jego zachowań. Canvas w HTML5 jest generowany na każdym komputerze w inny sposób i przez to każda maszyna otrzymuje inny hash i przy jego pomocy można śledzić aktywność internetową każdego użytkownika. Mając hash Canvas do identyfikacji nie są potrzebne inne elementy (np. ciasteczka czy identyfikator User-Agent, które można blokować.

Metodę zaprezentowano w 2012. Zastosowanie jej w komercyjnym przedsięwzięciu śledzenia użytkowników technologia pozostawiania sygnatur przez odwiedzających zaniepokoiło opinię publiczną.

W 2014 Uniwersytet Princeton opublikował wyniki badań, podczas których przeanalizowano 100 000 najczęściej odwiedzanych witryn z całego świata w zakresie stosowania cyfrowych śladów w postaci sygnatur. Ponad 5500 (5%) badanych witryn internetowych stosowało skrypty tworzące ślady odwiedzin w celu identyfikowania internautów bez używania plików cookie. Opublikowana lista witryn zawiera także zewnętrzne domeny śledzące usługę (Fingerprinting Domain), do których przekazywane były dane o sygnaturach użytkowników. Czołowym portalem śledzących był wówczas serwis AddThis. W większości przypadków mechanizmy technologii canvas fingerprinting zostały zaimplementowane przez firmy marketingowe bez wiedzy operatorów witryn. Przedsiębiorstwa zleciły zewnętrznym firmom marketingowym realizowanie reklam online, tymczasem sprzedawcy reklam użyli metod śledzenia, nie powiadamiając o tym swoich zleceniodawców.

Linki zewnętrzne

• HTML/Elements/canvas na w3.org/wiki (ang.)
• Canvas na Mozilla Developer Network (ang.)
• Elementy HTML5 Canvas (ang.)
• HTML5 canvas na w3schools (ang.)