Last year I blogged about creating a recordable HTML5 Canvas. I explained how to record strokes/drawings created on a HTML5 Canvas and play them back. There are a couple of comments on that post asking me to explain how to save recordings and load them back. Serialization and deserialization of recordings was on my to-do list for a long time and finally this week I got around to implement it. There are different ways to serialize and deserialize recordings, and I have implemented a simple method – using JSON. The serialized data is a bit verbose because of descriptive variable names I have used, but you can change that easily.
RecordableDrawing (in this script file) function remains unchanged. I have added a new file drawingSerializer.js . Two important functions in this file are serializeDrawing and deserializeDrawing.
serializeDrawing takes a RecordableDrawing object as argument and returns JSON string containing array of recordings.
deserializeDrawing takes a String (serialized data) as argument and returns array of Recording objects.
To see how serialization and deserialization works, follow these steps – Continue reading “De/Serializing Recordings in Recordable HTML5 Canvas”