Posted on by Ram

De/Serializing Recordings in Recordable HTML5 Canvas


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 –

  1. Click Record button and draw some strokes.
  2. Click Stop button when you are done
  3. Click Serialize button. This will display serialized text in a text area. You can copy the text and save somewhere. You could later deserialize the same text.
  4. Click Close button. 
  5. Click Deserialize button. This will display the text area. Copy serialize text you had saved, if it is not already displayed in the text area
  6. Click Submit button. You will see that deserialized recording is played back in the Canvas.


I have reproduced serialized string of a drawing here, if you just want to see how deserialization works. Copy the text from the following text area. Click Deserialize button and paste the text in the new text area. Click Submit button.

-Ram Kulkarni

Update :

See the updated version of code and example (with features to set stroke color and size) in my blog post Record and Playback Drawing in HTML5 Canvas – Part II

14 Replies to “De/Serializing Recordings in Recordable HTML5 Canvas”

  2. Hi Ram, i need to save the recoreded canvas and later need to load and play it.Looks above is almost same like saving the data as serialized and playing it again. i am not getting how to play from serialize data.

    Reply

    1. Serialization code should work for mobile app also. Two functions in drawingSerializer.js would be useful –
      1. serializeDrawing – Takes drawing object as argument and returns JSON string. Then on the mobile app you can write this data to a file
      2. deserializeDrawing – Takes JSON string as argument and returns array of recordings. In a mobile app, read serialized data from the file, pass the content to this function and create drawing object from array of recordings returned by the function.

      Reply

  4. Hello Ram, I just wonder if this functionality can save a recorded drawing directly to a database then load that same recording into a client app.

    Reply

    1. If it is a web application, you can load it from the server using AJAX call. If it is a mobile application and recordings are stored on the device, then you can use file APIs to read the file

      Reply

  6. Hello Ram, I plan to add drawing tools like circle, triangle etc., How can i serialize these shapes. Please give me some idea’s. Actually i plan to develop HTML5 video editor using canvas.

    Reply

    1. Create objects of shapes like Trinagle, Circle etc. Take a look at Point object in RecordableDrawing.js. It extends from Action object. Assign action type values for these shapes. I have defined three action types in RecordableDrawing.js – _POINT_ACTION = 1;
      _SET_COLOR_ACTION = 2;
      _SET_STOKE_SIZE = 3;

      Handle recording and drawing actions in RecordableDrawing.js. Then modify serializeAction and deserializeAction functions in drawingSerializer.js

      Reply

Leave a Reply

Social