В HTML 5 появилось много интересных и нужных возможностей, которых нехватало и они были реализованы например flash’ем… Собственно статья о возможности рисовать в canvas

Элемент <canvas> похож на элемент <img>, различие в том что у него нет атрибутов src и alt.  У <canvas>  есть  только 2 атрибута – ширина и высота. Если эти атрибуты отсутсвуют, то ширина по умолчанию будет равна 300 пикселей, а высота 150 пикселей.

Canvas может иметь такие же атрибуты стиля как и у <img> (margin, border, background и т.д.).  Если стиль не задан, то первоначально он полностью прозрачный.

Код:
<canvas width="300" height="300"><canvas>

Rendering Context
<canvas> создает отрисовочную поверхность фиксированного размера, которая предоставляет один или несколько контекстов. Контексты (context) используются для создания и манипулирования отрисованым содержимым. Мы будем рассматиривать 2-ух мерный контекст.

Стоит отметить, что canvas представляет из себя декартову поверхность начало координат (0,0) которой находится в левом верхнем углу, с координатами осью X увеличивающуюся вправо и Y увеличивающуюся вниз.

Canvas первоначально чист и для того чтобы начать в нем рисовать нам нужно получить context. У элемента canvas есть DOM метод getContext, который используется чтобы получить rendering context и отрисовычные  функции.  У getContext() есть один параметр – тип context (в нашем случае ‘2D’).

Код:
var canvas = document.getElementById('canvas');
 
var rc = canvas.getContext('2d');
Проверяем поддерживает ли браузер canvas.

var canvas = document.getElementById('canvas');
 
if (canvas.getContext){
 
var rc = canvas.getContext('2d');
 
// код для отрисовки
 
} else {
 
// сообщение о том что браузер не поддерживает canvas
 
}

Прямоугольник

Первое, что мы рассмотрим это прямоугольник. Существует 3 функции для его отрисовки на canvas.

Код:
fillRect(x,y,width,height) :  рисует закрашенный прямоугольник
strokeRect(x,y,width,height) : рисует незакрашеный прямоугольник (линии)
clearRect(x,y,width,height) : очищает пространство попадающее под площадь данного прямоугольника.
Функции имеют одинаковые параметры: X, Y – координаты верхнего левого угла, width,height – ширина и высота прямоугольника.
Посмотреть пример в действии

function draw(){  
  var canvas = document.getElementById('tutorial');  
  if (canvas.getContext){  
    var ctx = canvas.getContext('2d');  
 
    ctx.fillRect(25,25,100,100);  
    ctx.clearRect(45,45,60,60);  
    ctx.strokeRect(50,50,50,50);  
  }  
}

Результатом работы скрипта станет такая картинка. Функция fillRect нарисует закрашенный прямоугольник размером 100×100 пикселей, далее функция clearRect очистит прямоугольник размером 80×80 пикселей внутри закрашенного прямоугольника, ну и функцией strokeRect нарисуем незакрашеный прямоугольник.

Рисуем линии

Для рисования линий нам понадобятся ф-ии

beginPath()
closePath()
stroke()
fill()
moveTo(x, y)
lineTo(x, y)
arc(x, y, radius, startAngle, endAngle, anticlockwise)

Для рисования линии первой должна быть вызвана функия beginPath. Далее мы будем вызывать функции создающие линии из которых будет составлен конечный рисунок. Далее мы должны отрисовать наши линии вызвав stroke(), если же мы хотим получить закрашенный рисунок, то есть функция fill().
Метод closePath завершает дело начатое beginPath т.е. прерывает линию, но не отображает. Вызвав заполняющие функции (stroke или fill) мы закроем открытые формы и нам не нужно вызывать beginPath.
Функцией moveTo мы устанавливает точку от которой начнется линия.
Функцией lineTo устанавливаем точку к которой нужно провести линию.

Код:
<canvas id="canvas" widht="800" height="500"></canvas>
<script>
var rc=document.getElementById("canvas").getContext('2d');
rc.beginPath();
rc.font = 'italic 100 10px/2 Unknown Font, sans-serif';
rc.moveTo(100, 100);
rc.lineTo(200, 100);
rc.lineTo(200, 200);
rc.lineTo(100, 200);
rc.lineTo(100, 100);
rc.stroke();
</script>

Функция arc рисует дугу. x, y – координаты центра, radius – радиус, startAngle – угол начала, endAngle – угол конца дуги.

arc(x, y, radius, startAngle, endAngle)

Код:
<script>
var rc=document.getElementById("canvas").getContext('2d');
rc.beginPath();
rc.arc(100, 100, 50, 0, 2*Math.PI, true);
rc.stroke();
</script>