Сейчас мы с вами займемся работой с канвас. Канвас - это специальное поле для рисования в браузере на JavaScript. Канвас реализуется с помощью нового тега <canvas>, который появился в HTML5.

Начало работы

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

<canvas id="canvas" width="200" height="200"></canvas>

Затем нужно получить наше поле для рисования, к примеру через getElementById. Запишем его в переменную canvas (название произвольное) и сделаем так: var ctx = canvas.getContext('2d'):

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Переменная ctx - это объект, содержащий в себе так называемый контекст выполнения. Все рисование будет происходить с помощью методов этого объекта. Их изучением мы и займемся в следующих уроках.