HTML5 making a drawing board with canvas

Demand:

1. Drawing polygons
2. can fill color
3. Text can be set
4. Removable, can be deleted
5. When the mouse is pressed, the segment should follow the current position of the mouse before lifting
6. Data can be easily interacted with the background, saved to the background, or the data from the background to the foreground to display the corresponding graphics

Thinking:

1. The first thought is to find ready-made change, find to find, I think Fabricjs can still, but studied, found that examples are too few, it is difficult to get started in a short time
2. Think of recently have been want to study did not have time to see HTML5, just before also bought a book about the development of canvas game, want to try, did not expect to get started soon

Results: Completed in one and a half days, the results are as follows:
Attention:

1. Do not use style or CSS to set the width and height of the canvas, otherwise it will cause the coordinates to be magnified.
2. Use jquery to get a canvas using "$ (' #canvas '). Get (0)", otherwise the corresponding object is not taken
3. The palette uses "Spectrum.js"
4. The value assignment is in JSON mode, using "Jquery.json-2.4.js"
5. When using JSON assignment, because I have a JS wrapper class for the graphics, and with a custom method, so when the assignment is not recognized by the custom method of the problem, because when parsing json, the object will be parsed to object instead of my definition of objects, so it is necessary to deal with the human
6. All code +html A total of 600 lines, which in the past was completely unthinkable to me, HTML5 will bring us what kind of future? Worth looking forward to.

PS: Use HTML5 's canvas to make a simple graphical drawing device. Ideas to organize, browse broken thousand or comment over hundred, that is, on the source sharing.