Для всех случаев будем по умолчанию считать что мы уже определили canvas и получили ссылку на его контекст:

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

Фигура	Функция
Точка	т.к. родного метода для рисования точки нет, приходится рисовать линию в 1 пиксель: function drawPixel(x, y) { ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+1,y+1); ctx.stroke(); }
Прямая линия(Отрезок)	function drawLine(x1, y1, x2, y2) { ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); }
Кривая	?
Треугольник	function drawTriangle(x1, y1, x2, y2, x3, y3) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x1, y1); ctx.stroke(); }
Четырехугольник	function drawTetragon(x1, y1, x2, y2, x3, y3, x4, y4) { ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x4, y4); ctx.lineTo(x1, y1); ctx.stroke(); }
Прямоугольник	function drawRect(x1, y1, width, height) { ctx.fillRect(x1, y1, width, height); }
Квадрат	function drawSquare(x, y, width) { ctx.fillRect(x, y,width, width); }
Круг	function drawCircle(x, y, radius) { ctx.beginPath(); ctx.arc(x,y,radius,0,Math.PI*2,true); ctx.stroke(); }

Вот что получилось:


Подробности под катом.

Итак поехали:

<canvas id="tutorial" width="150" height="150"></canvas>

– добавляем HTML элемент в страницу. Для рисования необходимо обратиться к нему на javascript и получить контекст:

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

На данный момент 2д – единственный возможный контекст, поэтому с этим тоже не заморачиваемся.

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

ctx.fillRect (5, 5, 55, 50); // рисуем прямоугольник

Мы можем задать стиль для нашего прямоугольника:

ctx.fillStyle = "rgb(35, 200, 35)"; // сначала задаем стиль
ctx.fillRect (5, 5, 55, 50); // потом рисуем прямоугольник

Вроде бы все просто. Все методы, понятное дело, разбирать не будем. Вот есть схемка, которая поможет:

А в чем заключается анимация? В том что мы по времени перерисовываем картинку, или другими словами – меняем координаты/параметры движимых объектов.

Как видите ничего сложного нет. Нужны только фантазия и справочник по методам.

С кодом примера можно поиграться вот тут: http://learn.javascript.ru/play/lZqarb

Добавлю еще две иллюстрации, которые я нашел в сети, о том как рисовать дуги:

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

О принципе отсчета угла:

О радианах:

Источник этих прекрасных эскизов.