1

I would like to face a problem for which I haven't seen a solution looking around in Internet. This is: I need to save the elements drawn by WEB users on a canvas space not as a flat image, but each one singularly. This in order to let the same user, or even other users, to modify every single element (drag-and-drop, erase, erase partially, ecc.) in a second moment. This should also help to eventually save a drawing history and restore it in next working sessions. All the examples I found were intended to save just a canvas flat image.

Update:

To better clarify: not necessary as layers, but for sure I thought to realize several different driving tools; a drawing element is the singular application/istance of a tool: a circle, a box, a added image, a straight line or even a free hand drawing that start from the moment of right button mouse click till it is released. Then the chance to save the elements state allowing to modify each one in a second moment.

Community
  • 1
  • 1
Federico
  • 21
  • 1
  • Like Layers in GIMP/Photoshop? – bcoughlan Mar 20 '11 at 19:42
  • Do you have many different drawing tools? Like brush, pencil, stamp, path etc? How are the drawn elements represented in the logic part of your application? Are they represented at all? – MeLight Mar 21 '11 at 08:05

2 Answers2

0

You can't do this natively with canvas. You should look at using a third party library. Fabric is a library that was built to do what you want.

Nathan Ostgard
  • 8,258
  • 2
  • 27
  • 19
0

The base idea was to use convans as a container for vectorial shapes (triangles, squares, cirlces, etc.), manual drawn figures (see example http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) and inserted images giving the chance to users to save/upload the content not as serialized image, but with each distinguished element in its original format in order to continue to work on them in a future work session.

fede72bari
  • 343
  • 5
  • 17