Wiele kreatorów produktu, konfiguratorów, gier i wizualizacji danych korzysta właśnie z technologii Canvas. Pozwala ona za pomocą HTML i czystego JavaScriptu generować zarówno proste ale też skomplikowane kształty, gradienty i animacje. HTML Canvas pozwala załadować obrazek i wykonać w nim pewne modyfikacje. Modyfikacje takich obrazków nie ograniczają się do samych filtrów i predefiniowanych właściwości. W Canvas możemy dokonywać transformacji piksel po pikselu.
Co to jest HTML Canvas?
HTML Canvas to element technologii HTML5, która pozwala na dynamiczne i skryptowe renderowanie grafiki. Aktualizacja bitmapy przebiega proceduralnie i niskopoziomowo. Element <canvas> udostępnia własne API do rysowania i przetwarzania grafik 2D i wspiera WebGL API umożliwiając renderowanie grafiki 3D za pomocą OpenGL ES.
Krótka historia HTML Canvas
Element canvas został wprowadzony już w 2004 roku za sprawą firmy Apple, która chciała umożliwić tworzenie widżetów dla aplikacji Dashboard i rozszerzenia możliwości generowania grafiki w przeglądarce Safari. Później zaczęto wykorzystywać i obsługiwać <canvas> w przeglądarce Firefox, Opera i Google Chrome. Canvas stał się standardem w 2014 wraz z wprowadzeniem standardu HTML5. HTML 5 Canvas był jedną z trzech technologii nowej generacji. Pisałem o tym w 2014 roku w jednym z pierwszych artykułów na tym blogu: HTML5 – podstawy i technologie nowej generacji.
Tworzenie elementu Canvas w HTML
Sam element Canvas może być stworzony z poziomu kodu HTML. Deklaracja elementu canvas o podanej szerokości i wysokości może wyglądać tak:
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas</title> </head> <body> <canvas id="canvas" width="640" height="480"></canvas> </body> </html>
Element <canvas> zostanie już wyrenderowany w przeglądarce. Na stronie bez żadnych stylów CSS, nie będzie jednak widoczny, ponieważ nie zawiera żadnej grafiki a kolor tła dziedziczy po elemencie nadrzędnym. Kiedy jednak klikniemy na nim prawym przyciskiem myszy, menu kontekstowe pozwoli zapisać canvas jako zwykły obrazek:
Kanwa HTML składa się zatem z obszaru do rysowania, który zdefiniowaliśmy w kodzie HTML. Kod JavaScript może uzyskać dostęp do tego obszaru za pomocą pełnego zestawu funkcji rysowania podobnych do innych popularnych interfejsów API 2D, umożliwiając w ten sposób dynamiczne generowanie grafiki.
Przykład rysowania w HTML Canvas
Interakcja z elementem Canvas polega na zdefiniowaniu kontekstu renderowania, który określa, czy użyć Canvas API, WebGL czy WebGL2. Dla przykładu – narysujmy prostokąt. Aby uprościć kod, sam element canvas przypisujemy do zmiennej e zaś kontekst do zmiennej c:
<script>
var e = document.getElementById('canvas');
var c = e.getContext('2d');
c.fillStyle = "#333333";
c.fillRect(16, 16, 320, 160);
</script>
Kod odpowiedzialny za rysowanie na płótnie musi być wykonany po wczytaniu całej strony dlatego zaleca się dodawać kod JS na samym końcu kodu HTML (przed znacznikiem zamykającym body) lub stosować wykrywanie zdarzenia window.onload.
Wygeneruje nam to prostokąt w kolorze #333333 o szerokości 320px i wysokości 160px. Lewy góry wierzchołek prostokąta będzie umieszczony w punkcie 16;16. Pierwszy argument to wartość współrzędnej x punktu początkowego a drugi argument to wartość y punktu początkowego. Początek układu odniesienia znajduje się zatem w lewym górnym rogu.
