Tagi HTML: canvas

Element <canvas> to jeden z najpotężniejszych elementów HTML5, który umożliwia rysowanie grafik, animacji, gier i wizualizacji bezpośrednio w przeglądarce za pomocą JavaScript.

Canvas renderuje grafikę 2D, a z wykorzystaniem WebGL także 3D – bez zewnętrznych wtyczek. To sprawia, że jest idealnym wyborem dla nowoczesnych aplikacji webowych.

Najważniejsze zalety elementu <canvas> w skrócie:

Rysowanie 2D i 3D – wektorowa grafika 2D oraz grafika 3D przez WebGL;
Brak wtyczek – natywne działanie w nowoczesnych przeglądarkach, bez dodatkowych instalacji;
Pełna kontrola w JavaScript – praca na poziomie pikseli, własne animacje i efekty;
Wszechstronne zastosowania – gry, wykresy, edytory, efekty wizualne.

Podstawy elementu `<canvas>`

Aby zacząć, dodaj do HTML tag z atrybutami width i height, które definiują rozmiar płótna w pikselach. Domyślne wymiary to 300×150 px, ale zaleca się ich jawne ustawienie.

Podstawowa struktura HTML z canvas:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Podstawowy Canvas</title> </head> <body> <h1>Podstawowy Canvas</h1> <canvas id="myCanvas" width="400" height="250" style="border: 5px solid #000000;"></canvas>

<script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Kontekst 2D do rysowania </script> </body> </html>

Kluczowy jest obiekt getContext('2d'), który zwraca kontekst rysunkowy – bez niego płótno pozostaje puste.

Uwaga: ustawienie rozmiaru wyłącznie w CSS skaluje obraz, ale nie zmienia jego rozdzielczości pikseli. Dla ostrej grafiki używaj atrybutów width i height bezpośrednio w HTML.

Rysowanie podstawowych kształtów

Canvas operuje na ścieżkach (paths), stylach i stanach kontekstu. Standardowy przepływ rysowania wygląda tak:

rozpocznij ścieżkę poleceniem beginPath(),
dodaj segmenty za pomocą metod takich jak moveTo(), lineTo(), arc(),
ustaw styl rysowania: strokeStyle, fillStyle, lineWidth,
narysuj kontur stroke() lub wypełnij kształt fill().

Prostokąty i wypełnienia

Prostokąty to najprostsze figury: fillRect(x, y, width, height) lub strokeRect(). Oto przykład:

<canvas id="rectCanvas" width="400" height="250" style="border:1px solid #000;"></canvas>


<script>

  var canvas = document.getElementById('rectCanvas');

  var ctx = canvas.getContext('2d');

ctx.fillStyle = "#FF0000"; // Czerwone wypełnienie ctx.fillRect(50, 50, 150, 100); // x=50, y=50, szer=150, wys=100 </script>

Możesz łączyć kolor z przezroczystością, np. ctx.fillStyle = 'rgba(255,0,0,0.5)'.

Linie i ścieżki

Linie rysujemy metodami moveTo(x, y) i lineTo(x, y), a następnie wywołujemy stroke():

<canvas id="lineCanvas" width="400" height="250" style="border:1px solid #000;"></canvas>


<script>

  var canvas = document.getElementById('lineCanvas');

  var ctx = canvas.getContext('2d');

ctx.beginPath(); ctx.moveTo(50, 50); // Punkt startowy ctx.lineTo(200, 200); // Punkt końcowy ctx.lineWidth = 5; // Grubość linii ctx.strokeStyle = '#00FF00'; ctx.stroke(); </script>

Aby uzyskać różne zakończenia i styl, użyj ctx.lineCap = 'round' lub ctx.setLineDash([5, 5]).

Łuki, koła i krzywe

Pełne koło narysujesz metodą arc(x, y, radius, startAngle, endAngle) z zakresem od 0 do 2 * Math.PI:

<canvas id="circleCanvas" width="400" height="350" style="border:1px solid #000;"></canvas>


<script>

  var canvas = document.getElementById('circleCanvas');

  var ctx = canvas.getContext('2d');

ctx.beginPath(); ctx.arc(200, 175, 100, 0, 2 * Math.PI); // Centrum (200,175), r=100 ctx.fillStyle = 'blue'; ctx.fill(); ctx.stroke(); </script>

Dla wycinków koła zmień kąty, np. 0 i Math.PI dla półkola.

Tekst i czcionki w canvas

Tekst dodasz metodami fillText('tekst', x, y) lub strokeText(). Wpływ na wygląd mają właściwości font, textAlign i textBaseline:

<canvas id="textCanvas" width="400" height="250" style="border:1px solid #000;"></canvas>


<script>

  var canvas = document.getElementById('textCanvas');

  var ctx = canvas.getContext('2d');

ctx.font = 'bold 30px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = 'purple'; ctx.fillText('Witaj w Canvas!', 200, 125); </script>

Gradienty, cienie i zaawansowane style

Canvas wspiera gradienty liniowe i radialne. Poniżej przykład gradientu liniowego użytego jako kontur:

var gradient = ctx.createLinearGradient(0, 0, 400, 250); gradient.addColorStop(0, 'red'); gradient.addColorStop(0.5, 'springgreen'); gradient.addColorStop(1, 'orangered');

ctx.strokeStyle = gradient; ctx.lineWidth = 10; ctx.strokeRect(50, 50, 300, 150);

Dla efektu głębi wykorzystaj cienie. Przykładowe ustawienia:

ctx.shadowColor = 'rgba(0,0,0,0.5)'; ctx.shadowBlur = 10; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5;

Animacje w canvas

Animacje opierają się na requestAnimationFrame() oraz cyklicznym czyszczeniu płótna metodą clearRect(0, 0, width, height).

Oto prosty przykład animowanego koła:

<canvas id="animCanvas" width="400" height="250" style="border:1px solid #000;"></canvas>


<script>

  var canvas = document.getElementById('animCanvas');

  var ctx = canvas.getContext('2d');
  var x = 50, dx = 2;
  function animate() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();

    ctx.arc(x, 125, 30, 0, 2 * Math.PI);

    ctx.fillStyle = 'orange';

    ctx.fill();
    x += dx;

    if (x > 370 || x < 50) dx = -dx;
    requestAnimationFrame(animate);

  }

animate(); </script>

Animacja odbija „piłkę” od krawędzi, stanowiąc świetną bazę pod gry i interakcje.

Zaawansowane techniki: klipowanie i stan kontekstu

Używaj ctx.save() i ctx.restore(), aby zapisać/przywrócić stan kontekstu (np. stylów, transformacji). Klipowanie poleceniem ctx.clip() ogranicza rysowanie do aktualnej ścieżki.

Przykład losowych kwadratów generowanych w pętli:

const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d");


ctx.clearRect(0, 0, canvas.width, canvas.height);
function rand(min, max) {

  return Math.random() * (max - min) + min;

}
for (let i = 0; i < 20; i++) {

  const x = rand(10, canvas.width-100);

  const y = rand(10, canvas.height-100);

  const size = rand(10, 100);
  ctx.beginPath();

  ctx.moveTo(x, y);

  ctx.lineTo(x + size, y);

  ctx.lineTo(x + size, y + size);

  ctx.lineTo(x, y + size);

  ctx.closePath();

ctx.strokeStyle = `hsl(${rand(0,360)}, 70%, 50%)`; ctx.stroke(); }

Efekt to dynamiczna mozaika kolorowych kwadratów, idealna do nauki pracy ze ścieżkami i kolorem.

Obsługa starszych przeglądarek i wsparcie

Canvas działa w większości nowoczesnych przeglądarek. W bardzo starych środowiskach (np. IE8) historycznie stosowano polyfill, np. excanvas.js. Aby upewnić się, że kontekst jest dostępny, użyj prostego warunku:

if (canvas.getContext) { // obsługa canvas } else { // fallback }

Praktyczne zastosowania `<canvas>`

Poniżej znajdziesz wybrane, najczęstsze scenariusze użycia:

Gry 2D – kolizje, fizyka, sterowanie;
Wizualizacje danych – wykresy, mapy cieplne;
Animacje – efekty cząsteczkowe, matrix rain;
Edytory graficzne – proste narzędzia podobne do Photoshopa;
Integracja z WebGL – grafika 3D.

Uproszczony szkic efektu „matrix rain” w pętli animacji:

// Losowe znaki spadające jak w „Matrixie” ctx.fillStyle = "hsla(120, 80%, 60%, 0.05)"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Ślad // Rysuj nowe znaki...

Podsumowanie przykładów w tabeli porównawczej

Poniższa tabela zbiera kluczowe techniki i odpowiadające im metody oraz skrótowe przykłady użycia:

Kształt/technika	Kluczowe metody	Przykład użycia
Prostokąt	`fillRect()`, `strokeRect()`	`fillRect(50, 50, 150, 100)`
Linia	`moveTo()`, `lineTo()`, `stroke()`	Od `(50, 50)` do `(200, 200)`
Koło	`arc()`, `fill()`	`arc(200, 175, 100, 0, 2 * Math.PI)`
Tekst	`fillText()`, `font`	`'Witaj!'` z `textAlign='center'`
Animacja	`requestAnimationFrame()`, `clearRect()`	Odbijające koło
Gradient	`createLinearGradient()`, `addColorStop()`	Czerwony–zielony–pomarańczowy

Eksperymentuj z kontekstem 2D, zdarzeniami myszy i klawiatury – dzięki <canvas> szybko zbudujesz interaktywne gry, efekty i wizualizacje.

Podstawy elementu <canvas>