Canvas w HTML to specjalny element, wprowadzony w standardzie HTML5, który umożliwia dynamiczne, programistyczne tworzenie i rysowanie grafiki rastrowej (bitmapowej) za pomocą JavaScriptu. Nie jest to narzędzie do wstawiania gotowych obrazów, lecz prawdziwe „płótno”, na którym możesz rysować dowolne kształty, linie, teksty, odtwarzać obrazy, a także animować zawartość bez użycia dodatkowych wtyczek.
Podstawowa składnia elementu canvas
Element tworzy się za pomocą prostego znacznika HTML:
<canvas id="myCanvas" width="400" height="300"> Twoja przeglądarka nie obsługuje elementu Canvas. </canvas>
id jest atrybutem identyfikującym płótno, a width i height określają rozmiar w pikselach. Treść w środku znacznika wyświetli się tylko wtedy, gdy przeglądarka nie obsługuje technologii canvas.
Podstawowe rysowanie za pomocą JavaScript
Aby narysować coś na płótnie, wykorzystuje się JavaScript oraz specjalny kontekst rysowania (2d lub WebGL):
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // Rysowanie czerwonego prostokąta ctx.fillStyle = 'red'; ctx.fillRect(30, 30, 100, 50);
Najczęstsze zastosowania canvas
- Tworzenie animacji – np. poruszające się obiekty, efekty graficzne, symulacje;
- Projektowanie oraz renderowanie gier przeglądarkowych – platformówki, gry logiczne czy zręcznościowe bez konieczności instalowania dodatkowych pluginów;
- Interaktywna wizualizacja danych – rysowanie wykresów liniowych, słupkowych lub punktowych, map termicznych itp.;
- Edycja i przetwarzanie zdjęć oraz obrazków – retusz zdjęć online, nakładanie filtrów czy efektów specjalnych;
- Prezentacja rezultatów algorytmów komputerowej grafiki – generowanie fraktali, efekty specjalne, manipulacja pikselami;
- Tworzenie wizualizacji naukowych i edukacyjnych – wykresy funkcji matematycznych, modele ruchu ciał, demonstracje algorytmów.
Przykłady użycia
Rysowanie prostych kształtów
// Linia ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(180, 20); ctx.stroke(); // Okrąg ctx.beginPath(); ctx.arc(100, 100, 40, 0, 2 * Math.PI); ctx.stroke();
Dodawanie obrazu do canvas
const img = new Image(); img.onload = function() { ctx.drawImage(img, 10, 10); }; img.src = 'obrazek.png';
Rysowanie i animacje
Animacje uzyskuje się dzięki regularnemu odświeżaniu zawartości płótna. Najczęściej używa się do tego funkcji requestAnimationFrame, by zachować płynność.
let x = 0; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // czyści canvas ctx.fillRect(x, 30, 50, 50); x += 2; requestAnimationFrame(animate); } animate();
Cechy szczególne i ograniczenia canvas
- Nie jest to narzędzie do tworzenia złożonych interfejsów użytkownika. Do takich zastosowań wykorzystuje się raczej HTML i CSS;
- Nie przechowuje w sobie rysowanych obiektów jako “warstw” czy elementów DOM – po narysowaniu obiektu, aby go usunąć czy przesunąć, trzeba ponownie narysować całą scenę;
- Integracja z innymi technologiami – canvas jest często używany razem z bibliotekami JavaScript (np. p5.js, Paper.js, Three.js dla 3D lub Chart.js do wykresów);
- Obsługa zdarzeń – standardowy canvas nie obsługuje natywnie wykrywania kliknięć na konkretne narysowane obiekty (trzeba to obsłużyć programistycznie).
Przykład pełnej, animowanej sceny na canvas
<canvas id="anim" width="400" height="150"></canvas> <script> const canvas = document.getElementById('anim'); const ctx = canvas.getContext('2d'); let pos = 0; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(50 + pos, 75, 30, 0, 2 * Math.PI); ctx.fillStyle = 'orange'; ctx.fill(); pos = (pos + 2) % (canvas.width - 60); requestAnimationFrame(animate); } animate(); </script>
Ten kod animuje pomarańczowe koło przesuwające się w poziomie po płótnie.
Podsumowanie
Canvas jest potężnym narzędziem do dynamicznego generowania grafiki na stronach internetowych. Dzięki niemu w prosty sposób można tworzyć interaktywne gry, wizualizacje i animacje, a ograniczeniem staje się tylko wyobraźnia i umiejętność programowania w JavaScript. Warto eksperymentować, łączyć canvas z innymi technologiami (np. WebGL dla grafiki 3D) i budować na tej bazie własne projekty.
