HTML Canvas: сохранение графического элемента для последующего изменения другими пользователями

Question

Я хотел бы столкнуться с проблемой, для которой я не видел решения, которое искал бы в Интернете. Это: Мне нужно сохранить элементы, нарисованные пользователями WEB, в пространстве холста не в виде плоского изображения, а каждого по отдельности. Это позволяет тому же пользователю или даже другим пользователям изменять каждый отдельный элемент (перетаскивание, стирание, частичное стирание и т. Д.) Во второй момент. Это также должно помочь в конечном итоге сохранить историю рисунков и восстановить ее в следующих рабочих сеансах. Все примеры, которые я нашел, были предназначены для сохранения только плоского изображения холста.

Обновление:

Чтобы лучше уточнить: не обязательно, как слои, но наверняка я подумал реализовать несколько различных инструментов вождения; Элемент рисования - это единственное применение инструмента: круг, прямоугольник, добавленное изображение, прямая линия или даже рисунок свободной рукой, который начинается с момента нажатия правой кнопки мыши до его отпускания. Затем возможность сохранить состояние элементов, позволяя изменить каждый из них в секунду.

Answer 1

Основная идея заключалась в том, чтобы использовать конваны в качестве контейнера для векторных фигур (треугольников, квадратов, вихрей и т. Д.), Рисованных фигур вручную (см. Пример http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) и вставленных изображений, позволяющих пользователям сохранять / загружать контентне как сериализованное изображение, а с каждым выделенным элементом в его первоначальном формате, чтобы продолжить работу над ними в будущей рабочей сессии.

Answer 2

Вы не можете сделать это изначально с помощью canvas.Вы должны посмотреть на использование сторонней библиотеки. Fabric - это библиотека, созданная для того, что вы хотите.