GFX Serialization Demo

Drag a shape in the canvas... ...the drawing is deserialized here!
Buffered Updates

And view the drawing text representation below:

[{"shape":{"type":"rect","x":10,"y":20,"width":80,"height":80,"r":8},"stroke":{"type":"stroke","color":{"b":176,"g":192,"r":205,"a":1},"style":"solid","width":2,"cap":"butt","join":4},"fill":{"r":238,"g":223,"b":204,"a":0.6}},{"shape":{"type":"polyline","points":[{"x":117.639953710391,"y":195.182708784827},{"x":82.3600462896092,"y":195.182708784827},{"x":49.4625123637738,"y":182.438136245216},{"x":23.390346181097,"y":158.670216307581},{"x":7.66473825540938,"y":127.088938262093},{"x":4.40951907567668,"y":91.9595287066958},{"x":14.064324029914,"y":58.0264090606251},{"x":35.3252182099305,"y":29.8724351619895},{"x":65.3208000460332,"y":11.2999571923546},{"x":99.9999999999999,"y":4.81729121517272},{"x":134.679199953967,"y":11.2999571923545},{"x":164.674781790069,"y":29.8724351619893},{"x":185.935675970086,"y":58.0264090606249},{"x":195.590480924323,"y":91.9595287066956},{"x":192.335261744591,"y":127.088938262092},{"x":176.609653818903,"y":158.670216307581},{"x":150.537487636226,"y":182.438136245216},{"x":117.639953710391,"y":195.182708784827}]},"transform":{"xx":0.5,"yy":0.5,"dx":70,"dy":35},"stroke":{"type":"stroke","color":{"b":122,"g":139,"r":139,"a":1},"style":"solid","width":2,"cap":"butt","join":4},"fill":{"r":205,"g":205,"b":180,"a":0.6}},{"shape":{"type":"path","path":"M 10.4997 177.0384L 31.1749 178.5699C 52.6159 154.3212 61.0392 82.5959 187.3879 96.6347C 182.7934 403.9556 48.0214 436.3723 56.4447 499.4191C 59.5077 535.1541 87.8404 557.1056 118.4704 558.3818C 215.2101 555.0636 210.8709 424.6308 240.9904 95.8689L 365.8076 95.8689C 359.1711 211.7524 341.0484 327.6359 339.0064 441.2221C 340.5379 516.7761 386.4828 557.1056 446.9771 557.6161C 546.5246 560.9343 577.9203 444.7956 577.9203 395.2771L 556.4793 395.2771C 554.4373 436.1171 534.7831 465.4708 492.9221 467.2576C 378.8254 468.7891 441.6168 266.6311 442.3826 97.4004L 577.9203 98.1662L 577.1545 11.6364C 13.8075 8.9076 85.3123-2.1366 10.4997 177.0384z"},"transform":{"xx":0.2,"yy":0.2,"dx":170,"dy":95},"stroke":{"type":"stroke","color":{"r":110,"g":139,"b":61,"a":1},"style":"solid","width":4,"cap":"butt","join":4},"fill":{"r":162,"g":205,"b":90,"a":1}},{"shape":{"type":"path","path":"M 694.594 104.102v 60.604h 40.403v-60.604H 694.594zM 694.998 471.96c-0.812 17.886-11.512 56.267-45.76 80.509l 26.369 36.766c 0 0 62.211-66.451 59.391-114.733V 184.906h-40.4L 694.998 471.96zM 1046.902 335.198c 0 73.13-60.609 121.206-121.207 121.206c-70.703 0-118.781-60.604-118.781-121.206c 0-65.651 53.125-118.778 118.781-118.778C 998.82 216.419 1046.902 277.023 1046.902 335.198zM 1087.302 335.198c 0-85.854-68.278-159.182-161.606-159.182c-65.656 0-141.411 40.403-159.185 136.359v 48.076c 0 5.054 2.623 15.148 5.051 22.625c 25.251 80.809 98.578 113.732 154.134 113.732C 1011.544 496.811 1087.302 428.531 1087.302 335.198zM 280.47 94v 126.057v 71.61v 89.591c-18.989 46.672-65.653 75.151-112.322 75.151c-70.703 0-118.78-60.604-118.78-121.206c 0-65.651 53.128-118.779 118.78-118.779c 30.608 0 56.867 10.708 77.064 27.268l 7.072-45.048c-24.141-14.238-52.722-22.619-84.139-22.619c-65.65-0.009-141.404 40.395-159.18 136.351v 48.076c 0 5.054 2.623 15.149 5.052 22.625c 25.252 80.809 98.578 113.733 154.129 113.733c 42.524 0 82.729-16.869 112.322-45.232v 36.355h 50.499V 94.011H 280.47V 94zM 632.775 335.198c 0 73.13-60.604 121.206-121.207 121.206c-70.703 0-118.78-60.604-118.78-121.206c 0-65.651 53.125-118.778 118.78-118.778C 584.699 216.419 632.775 277.023 632.775 335.198zM 673.178 335.198c 0-85.854-68.275-159.182-161.609-159.182c-65.651 0-141.406 40.403-159.182 136.359v 48.076c 0 5.054 2.623 15.148 5.052 22.625c 25.25 80.809 98.578 113.732 154.129 113.732C 597.423 496.811 673.178 428.531 673.178 335.198zM 993.773 115.415h-131.31c-2.432 2.623-5.053 2.623-5.053 7.674c 0 7.476 2.621 7.476 2.621 10.102h 131.309c 2.433-2.623 5.053-2.623 5.053-10.102C 996.394 118.041 993.773 118.041 993.773 115.415zM 579.65 115.415H 448.34c-2.426 2.623-5.049 2.623-5.049 7.674c 0 7.476 2.623 7.476 2.623 10.102h 131.307c 2.43-2.623 5.053-2.623 5.053-10.102C 582.273 118.041 579.65 118.041 579.65 115.415z"},"transform":{"xx":0.2,"yy":0.2,"dx":50,"dy":150},"fill":{"b":1,"g":1,"r":1,"a":1}}]