HTML таг canvas

Пример

Кратък пример как се използва тагът <canvas>.

<canvas id="myCanvas" width="300" height="150">
  Вашият браузър не поддържа елемента <canvas>.
</canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Фон
  ctx.fillStyle = '#f8f9fa';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Правоъгълник
  ctx.fillStyle = '#0d6efd';
  ctx.fillRect(20, 20, 100, 60);

  // Окръжност
  ctx.beginPath();
  ctx.arc(200, 75, 40, 0, Math.PI * 2);
  ctx.fillStyle = '#198754';
  ctx.fill();

  // Текст
  ctx.fillStyle = '#212529';
  ctx.font = '16px Arial';
  ctx.fillText('Canvas пример', 80, 140);
</script>

Дефиниция и употреба

Виж как се ползва тагът <canvas>.

Елементът <canvas> дефинира правоъгълна област в страницата, върху която с помощта на JavaScript може динамично да се рисуват графики: форми, линии, текст, изображения, анимации, диаграми, игри и др. Самият таг не съдържа графика по подразбиране – той предоставя „платно“, върху което се рисува чрез JavaScript API (обикновено 2D контекст с getContext('2d') или WebGL контекст за 3D).

Основните стъпки за използване на <canvas> са:

• Деклариране на елемента в HTML с желаните width и height (в пиксели). Ако не са зададени, по подразбиране са 300×150 px.
• Осигуряване на резервно съдържание между отварящия и затварящия таг (текст или HTML), което ще се покаже в браузъри без поддръжка на <canvas>.
• Достъп до елемента в JavaScript (например чрез document.getElementById()).
• Вземане на контекст за рисуване: const ctx = canvas.getContext('2d'); за 2D графика или 'webgl'/'webgl2' за 3D.
• Използване на методите на контекста за рисуване на форми (fillRect, strokeRect, beginPath, arc, lineTo и др.), текст (fillText, strokeText), изображения (drawImage) и анимации (чрез requestAnimationFrame).

<canvas> е блоков елемент и може да се стилизира с CSS (рамки, позициониране, responsive поведение и др.). Важно е да се прави разлика между HTML атрибутите width/height и CSS размерите: атрибутите определят реалната резолюция на платното (координатната система за рисуване), докато CSS само мащабира визуално елемента. За ясна и ненамазана графика е препоръчително да се задават размерите чрез атрибутите, а при нужда да се съобразяват с DPI на устройството.

Елементът често се използва за:

• Интерактивни диаграми и графики.
• Игри и анимации в браузъра.
• Редактиране на изображения, чертожни приложения.
• Визуализации на данни и научни симулации.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути