Czym jest element canvas w HTML5?

Element <canvas> w HTML5 jest kontenerem do rysowania grafiki za pomocą skryptów (zazwyczaj JavaScript). Umożliwia tworzenie dynamicznych wizualizacji, gier i animacji bezpośrednio w przeglądarce bez użycia wtyczek.

Kluczowe aspekty:

• Rysowanie pikselami: Działa na poziomie pikseli, zapewniając pełną kontrolę nad każdym elementem obrazu.
• Użycie API: Interakcja z <canvas> odbywa się przez API kontekstu renderowania, najczęściej 2d dla grafiki dwuwymiarowej. Istnieje również webgl dla 3D.
• Pusta płótno: Sam element <canvas> jest tylko kontenerem. Całe rysowanie odbywa się programowo.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Uzyskujemy element canvas
const canvas = document.getElementById('myCanvas');

// Uzyskujemy kontekst 2D do rysowania
const ctx = canvas.getContext('2d');

// Rysujemy prostokąt
ctx.fillStyle = "#FF0000"; // Kolor wypełnienia
ctx.fillRect(0, 0, 150, 75); // x, y, szerokość, wysokość

Możliwości obejmują rysowanie:

• Form podstawowych (linie, prostokąty, koła, łuki)
• Tekstu
• Obrazów
• Gradientów i wzorów
• Ścieżek (path) dla skomplikowanych figur