HTML тег canvas

Тег <canvas> определяет область, в которой можно рисовать при помощи скриптов (например, JavaScript).

Тег <canvas> - только контейнер для рисования. Чтобы реально что-либо нарисовать необходимо написать скрипт.

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

Разница между HTML 4.01 и HTML5

Тег <canvas> был добавлен в HTML5.

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

АтрибутОписание
heightОпределяет высоту элемента <canvas>
widthОпределяет ширину элемента <canvas>

Общие атрибуты

Тег <canvas> поддерживает общие атрибуты и атрибуты-события.

HTML пример использования

На лету рисует красный прямоугольник и отображает его в элементе <canvas>:


<canvas id="myCanvas"></canvas>

<script>
   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext("2d");
   ctx.fillStyle = "#FF0000";
   ctx.fillRect(0, 0, 80, 80);
</script>