Какво е елементът canvas в HTML5?

Елементът <canvas> в HTML5 е контейнер за рисуване на графики с помощта на скриптове (обикновено JavaScript). Позволява създаването на динамични визуализации, игри и анимации директно в браузъра без нужда от плъгини.

Ключови аспекти:

• Рисуване с пиксели: Работи на ниво пиксели, предоставяйки пълен контрол върху всеки елемент на изображението.
• Използване на API: Взаимодействието с <canvas> става чрез API на контекста за рендериране, най-разпространеният е 2d за двумерна графика. Има и webgl за 3D.
• Празно платно: Самият елемент <canvas> е просто контейнер. Цялото рисуване се извършва програмирано.

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

// Получаване на елемента canvas
const canvas = document.getElementById('myCanvas');

// Получаване на 2D контекст за рисуване
const ctx = canvas.getContext('2d');

// Рисуване на правоъгълник
ctx.fillStyle = "#FF0000"; // Цвят за запълване
ctx.fillRect(0, 0, 150, 75); // x, y, ширина, височина

Възможностите включват:

• Примитивни форми (линии, правоъгълници, кръгове, арки)
• Текст
• Изображения
• Градиенти и шарки
• Пътища (path) за сложни фигури