В javaScript есть набор функций для работы с Canvas.
Canvas_API
Например:
<canvas id="canvas"></canvas>// получить DOM элемент "canvas"
var canvas = document.getElementById("canvas");
// объект, через который управляем изображением
// у него есть набор свойств и методов
var ctx = canvas.getContext("2d");
// цвет заливки
ctx.fillStyle = "green";
// нарисовать прямоугольник от координаты (x10, y10)
// шириной 150, и высотой 100
ctx.fillRect(10, 10, 150, 100);
Та-дааам
А
ВОТ одна из многочисленных библиотек, которая помогает работать с Canvas на более высоком уровне.
Например, можно нарисовать картинку в Иллюстраторе или Корале, экспортировать ее в svg, и импортировать в javaScript, откуда можно получить и изменить любой элемент изображения, обрабатывать события (клик, ховер, ...), анимировать элементы.
// UPD
Если посмотреть на код svg изображения, то можно увидеть xml документ, в котором элементы изображения представлены в виде тегов, и некоторые свойства в виде "таблицы стилей"
...
<style type="text/css">
<![CDATA[
.fil0 {fill:#8A2628}
.fil1 {fill:#AC3A39}
]]>
</style>
...
<g id="001">
<polygon class="fil0" points="24,89 52,89 54,91 52,93 24,93 "/>
<polygon class="fil1" points="28,86 30,86 30,96 28,96 "/>
<polygon class="fil1" points="31,86 33,86 33,96 31,96 "/>
</g>
А
points="24,89 52,89 54,91 52,93 24,93 " - это координаты на плоскости. По ним будет проведена кривая, и заливка будет окрашена в #AC3A39 цвет.
Так что помимо javaScript, некоторыми свойствами можно управлять через css. А svg - это файл разметки, по которому можно нарисовать canvas
