2. HTML5 - język opisu struktury

2.4. Element Canvas

Element <canvas> pozwala na dynamiczne rysowanie grafiki, tworzenie animacji, gier, wizualizacji danych, a nawet interaktywnych aplikacji bez potrzeby korzystania z zewnętrznych wtyczek. Korzystając z języka JavaScript możliwe jest
Za pomocą JavaScriptu możemy rysować na obszarze płótna, który reprezentuje element <canvas>.

Element <canvas> sam w sobie jest tylko kontenerem na grafikę, czyli tzw. płótnem, na którym odbywa się rysowanie. Aby coś na nim narysować, musisz użyć JavaScriptu. Podstawowe atrybuty elementu <canvas> to:
  • width - definiujący szerokość obiektu wyrażoną w pikselach,
  • height - definiujący wysokość obiektu wyrażoną w pikselach.
Aby coś narysować na płótnie, potrzebujesz kontekstu graficznego – obiektu, który dostarcza metod do rysowania (np. linii, kształtów, obrazów). Dostępnych jest kilka różnych kontekstów, które znacząco zmieniają sposób wykorzystania płótna:
  • 2d - tworzy obiekt reprezentujący kontekst dwuwymiarowy (wybór sugerowany na początek),
  • webgl, webgl2 - tworzy obiekt reprezentujący kontekst trójwymiarowy (dostępne tylko w przeglądarkach implementujących WebGL API odpowiednio w wersji 1 lub 2),
  • webgpu - tworzy obiekt reprezentujący kontekst trójwymiarowy do renderowania grafiki za pomocą WebGPU (dostępne tylko w przeglądarkach implementujących WebGPU API),
  • bitmaprenderer - tworzy prosty kontekst pozwalający na podmianę treści płótna przy użyciu ImageBitmap.
Prosty przykład rysujący prostokąt na płótnie. 
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>

<script>
    // Pobierz element <canvas>
    const canvas = document.getElementById('myCanvas');
    
    // Uzyskaj kontekst 2D
    const ctx = canvas.getContext('2d');
    
    // Rysuj prostokąt
    ctx.fillStyle = 'blue'; // Ustaw kolor wypełnienia
    ctx.fillRect(50, 50, 200, 100); // Rysuj prostokąt (x, y, szerokość, wysokość)
</script>

Gdzie się plasuje Canvas względem innych technik rysowania w przeglądarkach internetowych?
Istnieją cztery sposoby rysowania rzeczy w przeglądarce: Canvas, SVG, CSS i bezpośrednia animacja DOM. Canvas różni się od pozostałych trzech:
  • SVG: SVG to wektorowy sposób rysowania grafiki. Każdy kształt ma obiekt, do którego można dołączyć obsługę zdarzeń. Przy powiększeniu krawędzie kształtu pozostają gładkie, podczas gdy Canvas stałby się pikselowany.
  • CSS: CSS to tak naprawdę stylizacja elementów DOM (ang. Document Object Model). Ponieważ nie ma obiektów DOM dla rzeczy rysowanych w Canvas, nie można użyć CSS do ich stylizacji. CSS wpłynie tylko na prostokątny obszar samego Canvas, więc możesz ustawić obramowanie i kolor tła, ale to wszystko.
  • Animacja DOM: DOM definiuje obiekty dla wszystkiego na ekranie. Animacja DOM, za pomocą CSS lub JavaScript do przesuwania obiektów, może być w niektórych przypadkach płynniejsza niż w przypadku Canvas, ale zależy to od implementacji przeglądarki.
Do czego w praktyce mogę zastosować Canvas?
Element Canvas daje potężne możliwości w sytuacjach, gdy niezbędne jest przygotowanie wizualizacji, których złożenie z elementów oferowanych przez język HTML byłoby bardzo złożone (pod względem nakładu pracy potrzebnego do zakodowania dane funkcjonalności) lub kosztowne (nieefektywne pod względem szybkości działania). Poniżej zamieszczono odnośniki do kilku przykładów zastosowań elementu Canvas.
Tworzenie wykresów 2D: Josh Marinacci "HTML Canvas Deep Dive" / Hands On: Making Charts
Stworzenie prostej gry 2D: Josh Marinacci "HTML Canvas Deep Dive" / Making a Game
Grafika 3D z wykorzystaniem WebGL oraz ThreeJS:
  • Google Earth - popularna wizualizacja naszej planety,
  • The Boat - cyfrowa kreacja, która umiejętnie łącząc wizualizację, tekst i dźwięk, wciąga użytkowników w intrygującą narrację,
  • BioDigital Human - prezentuje misternie szczegółowy i interaktywny model 3D ludzkiego ciała, oferując wciągającą podróż przez złożone układy organizmu,
  • Particle Love - płynna, interaktywna symulacja ruchu cząstek.
Praktyczny przykład, z którym swego czasu mierzył się autor niniejszego podręcznika. Otóż celem było prezentowanie na bieżąco wizualizacji widma sygnału przetwarzanego w czasie rzeczywistym. Nie wchodząc w szczegóły matematyczne: co najmniej kilkanaście razy na sekundę chcieliśmy rysować wykres typu y=f(x) składający się z kilku do kilkudziesięciu tysięcy punktów. Okazuje się, że przy tak postawionych wymaganiach wszystkie przetestowane biblioteki do rysowania wykresów w jakimś aspekcie były dyskwalifikowane - a to ze względu na zbyt długi czas rysowania, a to przez brak możliwości odpowiedniego skonfigurowania wyglądu wykresu do potrzeb projektowanej aplikacji... Finalnie skończyło się na tym, że zaimplementowana została własna biblioteka rysująca wykres i posiadająca wszystkie potrzebne funkcjonalności, a początkiem tego rozwiązania był proof-of-concept szybkiego rysowania wykresu właśnie za pomocą elementu Canvas. Ten POC możesz uruchomić klikając tutaj. Zapraszam do przeanalizowania jego kodu źródłowego (skrót klawiaturowy Ctrl+U w przeglądarce). Przykład demonstruje, że przy odpowiedniej obróbce wstępnej danych możliwe jest rysowanie wykresu z prędkością 60 klatek na sekundę, co spełnia postawione wymagania z dużym zapasem.
Canvas a dostępność cyfrowa
Należy jednak mieć na uwadze, że treści prezentowane w elemencie Canvas są niewidoczne np. dla czytników ekranów wykorzystywanych przez osoby niewidome, co prowadzi do pogorszenia dostępności cyfrowej takiej strony. Niezbędne są wtedy dodatkowe zabiegi, np. w postaci zapewnienia opisów alternatywnych prezentowanych wizualizacji.

Literatura
Z uwagi na obszerność tematu, osoby zainteresowane odsyłam do ciekawych opracowań zewnętrznych: