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. After the mouse is pressed, the segment should be trailing 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, think Fabricjs can also, just study, found that sample too little, very difficult to get started in a short time
2. Think of the recent has been want to study did not have time to see the HTML5, just before also bought a book about the development of canvas game, want to try, did not expect very fast to get started

Result: a day and a half time, the effect is 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 graphics, and with their own definition of the method, so at the time of assignment there will be a problem of the definition of their own method, the original because of parsing JSON, the object will be parsed as 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 how the future? Worth looking forward to.

HTML5 making a drawing board with canvas