Первой попалась вот эта www.html5rocks.com/en/tutorials/canvas/integrating/. Статья с примерами кода и ссылками на открытые движки html5, в которых используются описанные технологии. Список рассмотренных вопросов:
- как программно проверить, что canvas поддерживается браузером
- пример создания элемента canvas
- пример преобразования содержимого canvas в URI (img.src=»data:image/gif;base64,R0lGOD…)
- пример сохранения data URI в локальное хранилище (local storage)
- пример сохранения data URI на сервере через скрипт на PHP
- примеры рисования из кода Javascript линий и картинок на canvas
Следующая статья — http://www.html5canvas.ru/2011/03/mouse.html. Здесь приведён код javascript для обработки событий мыши на canvas — внутри, снаружи, нажатие кнопок, изменение координат курсора мыши. Приведён скелет html страницы для работы с canvas.
На http://www.robodesign.ro/paintweb/trunk/demos/demo1.html пример готового приложения — графический редактор PaintWeb, написанный на javascript. Из инструментов используются карандаш, стёрка, кружки, прямоугольники, вставка текста и картинок (по URL)
http://www.mrdoob.com/projects/harmony/#grid — ещё один движок для рисования на html5 — Harmony.
И напоследок http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#transformations — документация по API html5 canvas — масштабирование, перемещение и поворот содержимого canvas на произвольный угол; рисование и стиль линий, окружностей, прямоугольников, кривых Безье; текст; заливки, линейные и радиальные градиенты; вставка изображений; манипуляции на уровне пикселей; прозрачность изображений, смазывание, тень. Всё нафаршировано примерами кода.
В итоге информации достаточно, чтоб сделать графический редактор на html5 под собственные нужды.