Фигуры

<!-- квадрат -->
<rect x="10" y="10" width="50" height="50" fill="darkblue" />
 
<!-- закруглённый квадрат -->
<rect x="70" y="10" width="50" height="50" fill="darkred" rx="8"/>
 
<!-- круг -->
<circle cx="150" cy="35" r="20" fill="green" />
 
<!-- эллипс -->
<ellipse cx="215" cy="35" rx="30" ry="20" fill="orange" />

Пример на JSFiddle

Более сложные фигуры рекомендуется рисовать в векторных редакторах, например в Adobe Illustrator, в которых есть возможность сохранять картинки в SVG. Также, названия слоёв сконвертируется в id объекта, по которому можно будет обращаться в CSS и в JavaScript.

Canvas SVG Raphaël