Тег <canvas>

Тег <canvas> является уникальным тегом, с помощью которого создается определенная область, где можно рисовать и вставлять различные объекты в режиме real-time (реального времени), изменять их свойства и трансформировать, применяя сценарии JavaScript. Тег <canvas> применяют для создания анимации, онлайн-игр, рисунков, различных графиков и прочей скриптовой интерактивной среды.

Тег <canvas> парный и имеет обязательный закрывающий тег. К нему применяется несколько собственных атрибутов, а так же универсальные атрибуты и события. Тегу <canvas> обязательно нужно присваивать идентификатор (атрибут id), где задается уникальное имя элемента. Это необходимо чтобы сценарий, который будет использоваться, мог получить доступ и без проблем вывести результат:

            
  <canvas id="уникальное имя ">
    ...
  </canvas>
  			
             

В настоящее время тег <canvas> может не поддерживаться некоторыми браузерами, поэтому при желании можно разместить внутри тега какое-нибудь сообщение, которое будет отображаться посетителям, если тег <canvas> не поддерживается в их браузере.

            
  <canvas id="уникальное имя ">
    ...
    <p>Ваш браузер устарел и не поддерживает рисование</p>
  </canvas>
  			
             

Атрибуты тега <canvas>

id – идентификатор, который задает уникальное имя.

width – устанавливает ширину области в 150 пикселов по умолчанию.

height - устанавливает высоту области в 300 пикселов по умолчанию.

Пример:

        
<!DOCTYPE HTML>
<html>
  <head>
    <title>Тег CANVAS</title>
    <meta charset="utf-8">
    <script type="text/javascript">
     window.onload = function() {
     var drawingCanvas = document.getElementById('circle');
     if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     context.strokeStyle = "#000";
     context.fillStyle = "#00FF00";
     context.beginPath();
     context.arc(110,110,100,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     }
    }
    </script> 
  </head>
  <body>
   <p>Рисуем круг</p>
   <canvas id="circle" width="400" height="400">
     <p>Ваш браузер не может отобразить данный элемент. Рекомендуем обновить браузер</p>
   </canvas>
  </body>
</html>
			 
            
Смотреть пример