Используя HTML5 элемент canvas можно рисовать на веб-страницах произвольные фигуры.

Что Вы уже должны знать

Прежде чем приступить к изучению элемента canvas Вы должны иметь базовые знания JavaScript.

Получить соответствующие знания Вы можете в нашем JavaScript учебнике.

HTML5 Canvas

Элемент <сanvas> позволяет рисовать на веб-страницах произвольные фигуры с помощью JavaScript (или других клиентских скриптов).

При создании элемента canvas необходимо задать атрибут id (определяет имя элемента для доступа к нему из скриптов) и его размеры с помощью атрибутов width (ширина) и height (высота).

Содержимое помещенное между тэгами будет отображено если браузер пользователя не поддерживает элемент canvas.

<canvas id='draw' width='300' height='200'>Вы видите это сообщение, 
потому что Ваш браузер не поддерживает canvas.</canvas> 

Обратите внимание: сам по себе canvas ничего не рисует. Он представляет собой холст, который предоставляет возможности для рисования клиентским скриптам.

Рисование прямоугольников

Обратите внимание: параметры x и y задают величину смещения прямоугольника по горизонтали (x) и вертикали (y) от верхнего левого угла холста в пикселях.

Теперь попробуем нарисовать, что-нибудь на холсте.

var canvas=document.getElementById("draw");
var x=canvas.getContext("2d");
x.fillRect(50,40,55,55);
x.strokeRect(150,70,55,55);
x.clearRect(68,57,20,20); 

Объяснение примера:

1. var canvas=document.getElementById("draw") - находим нужный холст;
2. var x=canvas.getContext("2d") - обращаемся ко встроенному объекту, который содержит различные методы для рисования (первые два шага являются стандартными для рисования любого объекта в canvas);
3. x.fillRect(50,40,55,55) - рисуем закрашенный прямоугольник;
4. x.strokeRect(150,70,55,55) - рисуем не закрашенный прямоугольник;
5. x.clearRect(68,57,20,20) - очищаем зону в закрашенном прямоугольнике.

Рисование составных фигур

Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.д.).

beginPath();
/* Простые объекты помещаются здесь */
closePath(); // Автоматически завершает фигуру (соединяет конечную точку с начальной) 
//Теперь необходимо вызвать один из методов для рисования фигуры определенной выше
stroke(); //нарисует фигуру не закрашенной
fill(); //нарисует фигуру закрашенной

Обратите внимание: метод closePath() может отсутствовать.

var canvas=document.getElementById("draw");
var x=canvas.getContext("2d");
x.beginPath();
x.moveTo(20,20);
x.lineTo(70,70);
x.lineTo(20,70);
x.closePath();
x.fill();

Таблица простых объектов.

var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.beginPath();
x.arc(30,30,20,x1,x2);
x.moveTo(100,100);
x.rect(70,50,70,70);
x.fill();