Графика

Отображение в браузере:

Вы видите этот текст, если ваш браузер не поддерживает HTML5.

Код:

HTML

Canvas-html

CSS

Canvas-css

JavaScript

Canvas-js

Элемент canvas является контейнером для графики, которая задается с помощью JavaScript.

Отображение в браузере:

Код:

HTML

svg-html

CSS

svg-css

Элемент svg является контейнером для масштабируемой векторной графики.

Сравнение canvas и svg

Canvas SVG
Зависит от разрешения Не зависит от разрешения
Не поддерживает обработчики событий Поддерживает обработчики событий
Плохие возможности рендеринга текста Лучше всего подходит для приложений с большими областями рендеринга (Google Maps)
Можно сохранить полученное изображение как .png или .jpg При сложном рисунке медленный рендеринг
Хорошо подходит для игр с интенсивной графикой Не подходит для игровых приложений