Оновлено: 19.05.2025

canvas

Frontend HTML Теги canvas

Елемент <canvas> (від англ. canvas — полотно) створює область, де за допомогою JavaScript можна малювати різні об'єкти, виводити зображення, трансформувати їх і змінювати властивості. За допомогою <canvas> можна створювати малюнки, анімацію, ігри та ін
 

 

⌨️ Синтаксис

<canvas id="<ідентификатор>">
</canvas>

 

 

🔒 Закриваючий тег: Обов'язковий.

 

 

🔧 Атрибути

heightВизначає висоту полотна. Типово 300 пікселів.
widthЗадає ширину полотна. За замовчуванням 150 пікселів.

Для цього елемента доступні універсальні атрибути та події.

 

📋 Приклад

<!DOCTYPE html>
<html>
 <head>
  <title>canvas</title>
  <metacharset="utf-8">
 </head>
 <body>
  <canvas id="smile" width="200" height="200">
    <p>Your browser does not support drawing.</p>
  </canvas>
  <script>
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Draw a circle
     context.strokeStyle = "#000";
     context.fillStyle = "#fc0";
     context.beginPath();
     context.arc(100,100,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Draw The Left Eye
     context.fillStyle = "#fff";
     context.beginPath();
     context.arc(84,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Draw The Right Eye