Об Canvas

Canvas — элемент HTML5, предназначенный для создания растрового изображения при помощи JavaScript.

На сегодняшний день canvas чаще используется для построения графиков, простой анимации и игр в браузерах.

// <canvas width="500" height="500">ваш браузер не поддерживает данную технолоию</canvas>
 
var canvas = document.querySelector('canvas');
var ctx    = canvas.getContext("2d");
// сюда вставляется доп. параметры – ctx.arc, ctx.rect и т.д.
ctx.fill();

В HTML 5 есть ещё один инструмент для создания графических представлений — SVG. Отличие Canvas от SVG в том, что Canvas генерирует растровую графику, а SVG генерирует векторную графику.

Следует также отметить, что размеры элемента <canvas> надо указывать на самом теге, а не через CSS. Если размеры будут указаны через CSS, то браузер «растянет» элемент <canvas> на указанные размеры.