Рисование объектов на js

[Trigger]

Добрый день.
Стоит задача сделать рисовалку объектов произвольной формы под тач.
Что бы объекты сохранялись и пользователь мог в любой момент тачем изменить форму.
В первую очередь под Вин8 и ИЕ10, но должно работать и на других платформах, т.е. нативные возможности винды или ие использовать нельзя.

1.Чем реализовать? Только SVG реально?
2.Подскажите какие нить статьи, главы книг, примеры.

[skrudjmakdak]

цитата: "Что бы объекты сохранялись". javascript не работает с файловой системой. если вы хотите подобное реализовать. то объектами могут быть простые элементы: прямая линия, прямоугольник, овал.. потом эти данные (тип изображения и его координаты, цвет и т.п.) передаются на сервер. а сервер уже генерит картинку и обратно отдает на клиент.. имхо это гемор))

[nerv_]

на первый взгляд canvas

[Trigger]

skrudjmakdak,
Мне нужно именно объекты. Определять/вычислять свойства площадь, периметр фигуры, дополнительные пользовательские. localStorage не пойдет?
js+php+mysql?

nerv_,
Как в canvas нарисовать, например, ромашку и объявить, что это один объект?

p.s.Интересный графический редактор чисто на хтмл5 http://aviary.com/web через дивы все сделано

<div id="text_overlay-dd46b69e" class="avpw_selection_overlay avpw_selection_overlay_dragonly" style="left: 78.1843px; top: 36.1843px; width: 119.631px; height: 119.631px; z-index: 3; transform: rotate(314deg);">

[nerv_]

Как в canvas нарисовать, например, ромашку и объявить, что это один объект?

также, как сверстать меню и объявить, что это один объект

С другой стороны подходит и svg http://habrahabr.ru/post/157087/

Общее сравнение технологий Canvas и SVG
Простой графический движок: SVG vs Canvas

[macdack]

цель программы точнее скажи - тогда и посоветовать можно

[Trigger]

macdack,
Раскрою чуть подробней.
Весь экран - холст.
1 кнопка "Рисование" при тапе по кнопке активация/дективация режима рисования.

В режиме рисования
При тапе на пустом месте экрана (на холсте) появляется область "круг" с параметрами (название: Объект_1, площадь: 10 у.е. (условных единиц)).
При приведении пальцем изнутри области во вне область расширяется.
Пример: пользователь провел вправо, далее из центра получившийся полосы вверх, вниз, в диагонали. Должен получиться единый объект "ромашка", площадь предположим 100.
При тапе вне области появляется новая область с "круг" с параметрами (название: Объект_2, площадь: 10 у.е.).

Пользователь выходит из режима рисования (тап по кнопке).
Тап по "ромашке". Показывает параметры (название: Объект_1, площадь: 100 у.е.).
Тап по названию. Меняет название с "Объект_1" на "Ромашка"

Также должно быть доступно масштабирование (сведение/разведение пальцев на холсте).
! Новые объекты должны создаваться (рисоваться) с учетом масштаба.
Пример: При масштабе 0.1 площадь исходного круга 100 у.е.

Должна сохранятся история изменений с привязкой по времени/лог.
т.е. должна быть возможно узнать, что "Ромашку" нарисовали 13.06.2013 в 12:10:00, "Объект_2" через 30 секунд, "Объект_3" через 1 день.

p.s.Понимаю, что может быть множество вопросов, сейчас интересует именно как рисовать произвольные объекты, что бы их можно было масштабировать, двигать.

[macdack]

просто всё

рисуется всё на канвасе
события от тачскрина или мышки используются для создания и модификации растровых фигур в "слоях" канваса.
слои можно трансформировать отключать и тд как в фотошопе

и площадь лекго считать простым подсчетом пикселей фигуры

[macdack]

ну или еще проще поясню -

канвас - это прямоугольный экран с пикселями
пиксели ты можешь перекрашивать как угодно - каждым из них ты можешь управлять
итоговая твоя картинка в текущий момент времени это снимок всех твоих слоев-фигур
снимок переодически делается новый

все прикосновения отслеживаются и так можно сделать и трансформацию и рисование и перемещение...

[Trigger]

macdack, я Вас правильно понимаю, что каждая фигура в своем слое? И свойства фактически привязывать к слою (площадь, название и т.д.).

Особенность в том, что "области" изначально просто контур, без заливки! Далее по логике предполагается различные варианты штриховки+заливки.

Как тогда отслеживать само прикосновение? Попало оно в область существующей фигуры или же на пустой холст?

Еще вопрос про контур. Когда пользователь кликнул на область, она должна стать активной, визуально контур переливаться (или хотя бы двигающийся пунктир по контуру). Как понимаю, в канвасе нет инструментов работы с контурами. т.е. надо как-то хитро попиксельно его определять, и так же попиксельно вешать эффекты.

p.s.Повторю, что задача для меня новая. Буду благодарен за мануалы. Вообще про канвас и js вкурсе, также смотрел несколько примеров создания игрушек.