JavaScript Paint
 

Доделал JavaScript Paint для несложного редактирования изображений. Много чего не хватает (особенно контрл+зед), но все жизненоважное присутствует :) Поиграться можно тут.

Круг, эллипс, квадрат, прямоугольник, кисть, надпись (в т.ч. ссылки), "картинка в картинке", пока все. За ядро взята вот эта библиотека. Вначале думал, что библиотка канвасовская, но потом узрел, что рисует она чистым DOM, тоесть по-настощему true :)

Что трушного в куче дивов?

Трувеб. Paint - точечный рисунок. Каждая точка в данном случае - элемент страницы, а не вектор. Туда можно поместить любой элемент html (ссылка, картинка, даже другой скрипт или событие при наведении на точку).

Тру -- это SVG, а дивы -- костыль.

Не вникал в SVG, спорить не буду. Элементам svg можно присваивать innerHTML, присваивать события типа element.onclick = function() {}?

Какому из дивов, образующих эллипс, вы будете присваивать innerHTML?

Эллипс - дети (набор дивов) родительского дива. Для каждой фигуры создается отдельный див, в т.ч. для линии кисти, уже в этом диве рисуется то, что надо.

---
innerHTML я привел для примера, основная сила дома - в событиях. По клику на эллипсе можно перекрашивать этот эллипс например или менять координаты положения.

Добавил "отмену".

Насчет innerHTML не уверен, но .setAttribute() и .appendChild() вполне себе работают.

События вешать — да, можно. И css. И бесскриптовую анимацию.

subzey, спасибо, тогда и это намного интереснее, чем я думал, пойду изучать :) Значит, единственный недостаток свг - кроссбраузерность?