<canvas>

Создаёт область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи элемента <canvas> можно создавать рисунки, анимацию, игры и др.

Закрывающийся тег:

Обязателен

Поддержка:

HTML4 и выше

Атрибуты:

height - Задаёт высоту холста. По умолчанию 300 пикселей.
width - Задаёт ширину холста. По умолчанию 150 пикселей.
Также для этого элемента доступны универсальные атрибуты и события.

Пример:

<html>
 <head>
  <title>canvas</title>
  <meta charset="utf-8">
  <script> 
   window.onload = function() {
    var drawingCanvas = document.getElementById('circle');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Рисуем окружность 
     context.strokeStyle = "#9400D3";
     context.fillStyle = "#FF00FF";
     context.beginPath();
     context.arc(200,150,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     }
   }
  </script>
 </head>
 <body>
  <canvas id="circle" width="500" height="200">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
 </body>
</html>