Основы работы с canvas

Привет всем! Давненько я ничего не писал, адская неделя была на работе((

Сегодня я расскажу об основах работы с тегом canvas из HTML5. Это просто КРУТАЯ штука. Фактически canvas — это холст, на котором можно рисовать. Рендеринг — это довольно затратная для браузера вещь, поэтому сложного ничего лучше не делать.

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

Но начнём с простого примера:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<script src="./jquery.js"></script>
<style>
html,body{
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>

<body>
<canvas id="myCanvas">

</canvas>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

/*Стандартная ширина и высота canvas 300 на 150 пикселей.
Если растянуть этот элемент, используя CSS, например, style="width: 100%; height: 100%;",
то получится полная лажа: элемент растянется так, словно это картинка 300 на 150 пикселей.
Чтобы избежать этого, нужно использовать свойства width и height.
*/
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

ctx.moveTo(0,0); //Перемещает "курсор" в точку (0,0), где первый "0" - это x, а второй - y, иначе говоря, первое число задаёт позицию по горизонтали, а второе - по вертикали
ctx.lineTo(100, 100); //Проводит линию до точки
ctx.stroke(); //"Рисует" линию
</script>
</body>
</html>

Думаю, что всё с этим примером понятно.