Изучаем Canvas - тег который рисует все. Вводный урок №1

Canvas это такой же тег как div или table, но подразумевает другие вещи, а именно указывает, что его содержимое будет отображаться не без помощи JavaScript. Другими словами, чтобы использовать HTML5 Canvas, вам нужно добавить сам тег в HTML и создать вызывающую JavaScript функцию, которая обращается к canvas тегу, как только страничка загрузиться и использует HTML5 Canvas API для визуализаций.

<html>
<head>
<script>
 
function init() {
	var canvas=document.getElementById("myCanvas");
	var c=canvas.getContext("2d");

}
 
</script>
</head>
<body onload="init()">
	<canvas id="myCanvas" width="576" height="300">
             Ваш браузер не поддерживает Canvas.
        </canvas>
</body>
</html>

Это в принципе и все. Так будут начинаться любые ваши проекты с использованием Canvas API. Можно определить высоту и ширину canvas тега используя стандартные height и width параметры, как в других HTML5 тегах. onload event в теге body вызывает canvas тег. Внутри функции init() мы имеем доступ к canvas DOM элементу по его id(важно его указать), задаем так же getContext — 2d

На этом первый вводный урок закончен.