I'm working in image edition in JavaScript. I have to create mask with different tools (rectangle, brush, magic wand...) and save it to the database. To avoid sending all the pixels coordinates, I'd like to vectorize the mask and send only the vertex. How can I get that vertex from the CANVAS context?
Asked
Active
Viewed 342 times
0
-
The canvas context does not "remember" where it drew anything, so you can't query the context for previously drawn vertices. You will have to serialize all the drawing commands you issued to create the final drawing and save that serialization to your database. – markE Nov 18 '14 at 17:30
-
I solved it using the edge detection algorithm proposed here: http://stackoverflow.com/questions/24039599/how-to-add-stroke-outline-to-transparent-png-image-in-javascript-canvas – Raúl Gombru Dec 02 '14 at 10:30
1 Answers
0
The canvas is a raster surface. If you are treating it as a vector surface then you will need to record all of the operations applied in a separate data structure and send that to the server.
You may find that using SVG makes more sense than canvas in your case.
Drew Noakes
- 300,895
- 165
- 679
- 742
-
BTW, while it's true that the Canvas eventually displays a raster image (basically a bitmap), it's also true that most Canvas commands that draw on the canvas are vector commands. Serializing the drawing commands often results in a compact string very similar to SVG's `data` path string. ;-) – markE Nov 18 '14 at 16:51
-
1@markE, yep, many of them can be stored in a data structure as suggested, though you also need to keep track of when the pen is up/down and when paths begin end. – Drew Noakes Nov 18 '14 at 17:04
-
Agreed, to save an identical drawing you must save all Canvas drawing commands. That could be as simple as serializing a set of line commands: `"m 10,50 l 20,20 30,50 150,200"` or it might be a complex serialization including styling, transformations & compositing. Cheers! – markE Nov 18 '14 at 17:18