{"id":863,"date":"2013-06-28T10:11:27","date_gmt":"2013-06-28T04:41:27","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=863"},"modified":"2013-06-28T10:11:27","modified_gmt":"2013-06-28T04:41:27","slug":"deserializing-recordings-in-recordable-html5-canvas","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/deserializing-recordings-in-recordable-html5-canvas\/","title":{"rendered":"De\/Serializing Recordings in Recordable HTML5 Canvas"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2013-06-27\/js\/lib\/jquery-1.10.1.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2013-06-27\/js\/blog_js_script.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2013-06-27\/js\/drawingSerializer.js\"><\/script><script type=\"text\/javascript\">\/\/ <![CDATA[\nstartScript(\"canvas1\");\n\/\/ ]]><\/script><br \/>\nLast year I blogged about <a title=\"Record and Playback Drawing in HTML5 Canvas\" href=\"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas\/\" target=\"_blank\">creating a recordable HTML5 Canvas<\/a>. 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 &#8211; using JSON. The serialized data is a bit verbose because of descriptive variable names I have used, but you can change that easily.<\/p>\n<p>RecordableDrawing (<a href=\"http:\/\/ramkulkarni.com\/temp\/2013-06-27\/js\/blog_js_script.js\" target=\"_blank\">in this script file<\/a>) function remains unchanged. I have added a new file <a href=\"http:\/\/ramkulkarni.com\/temp\/2013-06-27\/js\/drawingSerializer.js\" target=\"_blank\">drawingSerializer.js<\/a>\u00a0. Two important functions in this file are\u00a0serializeDrawing and\u00a0deserializeDrawing.<br \/>\nserializeDrawing takes a RecordableDrawing object as argument and returns JSON string containing array of recordings.<br \/>\ndeserializeDrawing takes a String (serialized data) as argument and returns array of Recording objects.<\/p>\n<p>To see how serialization and deserialization works, follow these steps &#8211;<!--more--><\/p>\n<ol>\n<li><span style=\"font-size: 16px;\">Click Record button and draw some strokes.<\/span><\/li>\n<li><span style=\"font-size: 16px;\">Click Stop button when you are done<\/span><\/li>\n<li><span style=\"font-size: 16px;\">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.<\/span><\/li>\n<li><span style=\"font-size: 16px;\">Click Close button.\u00a0<\/span><\/li>\n<li><span style=\"font-size: 16px;\">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<\/span><\/li>\n<li>Click Submit button. You will see that deserialized recording is played back in the Canvas.<\/li>\n<\/ol>\n<div id=\"drawingDiv\"><canvas height=\"400\" id=\"canvas1\" style=\"border: medium; border-color: #00F; border-style: solid;\" width=\"500\"><\/canvas><br \/>\n<input id=\"recordBtn\" type=\"button\" value=\"Record\" \/> <input id=\"playBtn\" type=\"button\" value=\"Play\" \/> <input id=\"pauseBtn\" type=\"button\" value=\"Pause\" \/> <input id=\"clearBtn\" type=\"button\" value=\"Clear\" \/><br \/>\n<input id=\"serializeBtn\" type=\"button\" value=\"Serialize\" \/> <input id=\"deserializeBtn\" type=\"button\" value=\"Deserialize\" \/><\/div>\n<div><\/div>\n<div id=\"serializerDiv\" style=\"display: none;\"><textarea id=\"serDataTxt\" cols=\"80\" rows=\"8\"><\/textarea><br \/>\n<input id=\"cancelBtn\" type=\"button\" value=\"Close\" \/><input id=\"okBtn\" type=\"submit\" value=\"Submit\" \/><\/div>\n<p>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.<\/p>\n<pre><textarea style=\"margin: 1.80398px; width: 516px; height: 126px;\" cols=\"80\" rows=\"6\">[{\"actionsets\":[{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":39,\"y\":110,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":39,\"y\":110,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":39,\"y\":111,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":39,\"y\":119,\"isMovable\":false}],\"interval\":1404},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":39,\"y\":124,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":39,\"y\":132,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":39,\"y\":141,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":39,\"y\":151,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":39,\"y\":161,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":179,\"isMovable\":false}],\"interval\":1504},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":38,\"y\":188,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":210,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":232,\"isMovable\":false}],\"interval\":1605},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":38,\"y\":237,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":241,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":245,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":248,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":251,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":253,\"isMovable\":false}],\"interval\":1705},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":38,\"y\":255,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":256,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":38,\"y\":257,\"isMovable\":false}],\"interval\":1805},{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":40,\"y\":112,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":41,\"y\":111,\"isMovable\":false}],\"interval\":3512},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":42,\"y\":111,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":44,\"y\":110,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":48,\"y\":109,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":51,\"y\":109,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":54,\"y\":108,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":57,\"y\":108,\"isMovable\":false}],\"interval\":3612},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":61,\"y\":108,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":66,\"y\":108,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":69,\"y\":108,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":71,\"y\":108,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":74,\"y\":110,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":75,\"y\":111,\"isMovable\":false}],\"interval\":3712},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":77,\"y\":114,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":78,\"y\":117,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":79,\"y\":121,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":124,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":127,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":130,\"isMovable\":false}],\"interval\":3813},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":81,\"y\":132,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":135,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":137,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":140,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":142,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":145,\"isMovable\":false}],\"interval\":3913},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":81,\"y\":148,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":151,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":153,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":156,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":79,\"y\":158,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":76,\"y\":161,\"isMovable\":false}],\"interval\":4013},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":74,\"y\":164,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":72,\"y\":167,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":71,\"y\":169,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":69,\"y\":171,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":67,\"y\":173,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":65,\"y\":175,\"isMovable\":false}],\"interval\":4114},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":63,\"y\":176,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":61,\"y\":177,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":60,\"y\":178,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":58,\"y\":179,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":56,\"y\":180,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":54,\"y\":181,\"isMovable\":false}],\"interval\":4214},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":52,\"y\":181,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":50,\"y\":182,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":50,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":48,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":47,\"y\":185,\"isMovable\":false}],\"interval\":4314},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":46,\"y\":185,\"isMovable\":false}],\"interval\":4414},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":46,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":45,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":43,\"y\":185,\"isMovable\":false}],\"interval\":4515},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":42,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":41,\"y\":185,\"isMovable\":false}],\"interval\":4615},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":42,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":43,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":47,\"y\":188,\"isMovable\":false}],\"interval\":4816},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":51,\"y\":191,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":56,\"y\":194,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":60,\"y\":197,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":64,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":69,\"y\":203,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":72,\"y\":207,\"isMovable\":false}],\"interval\":4917},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":74,\"y\":211,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":77,\"y\":215,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":80,\"y\":218,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":82,\"y\":220,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":84,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":86,\"y\":225,\"isMovable\":false}],\"interval\":5017},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":88,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":91,\"y\":230,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":91,\"y\":232,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":92,\"y\":232,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":93,\"y\":233,\"isMovable\":false}],\"interval\":5117},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":93,\"y\":234,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":93,\"y\":235,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":94,\"y\":235,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":94,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":95,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":96,\"y\":236,\"isMovable\":false}],\"interval\":5217},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":97,\"y\":237,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":98,\"y\":238,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":98,\"y\":240,\"isMovable\":false}],\"interval\":5318},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":99,\"y\":240,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":100,\"y\":240,\"isMovable\":false}],\"interval\":5518},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":100,\"y\":241,\"isMovable\":false}],\"interval\":5719},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":100,\"y\":241,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":100,\"y\":241,\"isMovable\":false}],\"interval\":5820},{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":143,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":194,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":138,\"y\":193,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":134,\"y\":193,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":131,\"y\":193,\"isMovable\":false}],\"interval\":7126},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":129,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":127,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":126,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":126,\"y\":192,\"isMovable\":\nfalse},{\"type\":1,\"actionType\":1,\"x\":125,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":123,\"y\":192,\"isMovable\":false}],\"interval\":7227},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":122,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":121,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":121,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":120,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":118,\"y\":194,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":117,\"y\":195,\"isMovable\":false}],\"interval\":7327},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":116,\"y\":196,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":115,\"y\":198,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":114,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":113,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":113,\"y\":203,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":113,\"y\":206,\"isMovable\":false}],\"interval\":7427},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":113,\"y\":209,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":113,\"y\":212,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":113,\"y\":215,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":114,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":115,\"y\":221,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":116,\"y\":226,\"isMovable\":false}],\"interval\":7527},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":117,\"y\":229,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":119,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":121,\"y\":234,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":124,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":126,\"y\":238,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":129,\"y\":240,\"isMovable\":false}],\"interval\":7628},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":131,\"y\":241,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":132,\"y\":242,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":133,\"y\":244,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":135,\"y\":245,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":137,\"y\":245,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":139,\"y\":245,\"isMovable\":false}],\"interval\":7728},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":140,\"y\":245,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":245,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":243,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":142,\"y\":241,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":144,\"y\":239,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":146,\"y\":236,\"isMovable\":false}],\"interval\":7828},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":147,\"y\":232,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":147,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":147,\"y\":224,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":147,\"y\":220,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":147,\"y\":217,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":147,\"y\":213,\"isMovable\":false}],\"interval\":7929},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":147,\"y\":211,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":146,\"y\":210,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":145,\"y\":210,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":145,\"y\":208,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":144,\"y\":206,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":143,\"y\":204,\"isMovable\":false}],\"interval\":8030},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":143,\"y\":202,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":142,\"y\":201,\"isMovable\":false}],\"interval\":8130},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":142,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":197,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":194,\"isMovable\":false}],\"interval\":8231},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":141,\"y\":193,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":192,\"isMovable\":false}],\"interval\":8331},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":141,\"y\":193,\"isMovable\":false}],\"interval\":8532},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":141,\"y\":196,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":142,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":143,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":145,\"y\":205,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":146,\"y\":207,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":147,\"y\":209,\"isMovable\":false}],\"interval\":8632},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":148,\"y\":211,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":149,\"y\":214,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":151,\"y\":217,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":151,\"y\":220,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":151,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":152,\"y\":226,\"isMovable\":false}],\"interval\":8733},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":153,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":154,\"y\":230,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":155,\"y\":232,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":156,\"y\":233,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":156,\"y\":234,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":157,\"y\":235,\"isMovable\":false}],\"interval\":8833},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":158,\"y\":235,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":159,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":160,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":161,\"y\":237,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":161,\"y\":237,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":162,\"y\":238,\"isMovable\":false}],\"interval\":8933},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":162,\"y\":239,\"isMovable\":false}],\"interval\":9034},{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":185,\"y\":188,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":185,\"y\":190,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":185,\"y\":193,\"isMovable\":false}],\"interval\":10540},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":186,\"y\":197,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":187,\"y\":202,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":188,\"y\":206,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":188,\"y\":210,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":190,\"y\":215,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":191,\"y\":220,\"isMovable\":false}],\"interval\":10641},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":191,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":192,\"y\":229,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":193,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":193,\"y\":233,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":234,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":235,\"isMovable\":false}],\"interval\":10741},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":194,\"y\":234,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":232,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":230,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":226,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":220,\"isMovable\":false}],\"interval\":11143},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":194,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":217,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":215,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":212,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":210,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":207,\"isMovable\":false}],\"interval\":11243},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":195,\"y\":202,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":196,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":197,\"y\":198,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":198,\"y\":196,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":199,\"y\":196,\"isMovable\":false}],\"interval\":11343},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":199,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":200,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":200,\"y\":194,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":201,\"y\":194,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":205,\"y\":191,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":208,\"y\":191,\"isMovable\":false}],\"interval\":11444},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":210,\"y\":190,\"isMov\nable\":false},{\"type\":1,\"actionType\":1,\"x\":211,\"y\":189,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":213,\"y\":189,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":213,\"y\":189,\"isMovable\":false}],\"interval\":11544},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":214,\"y\":189,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":215,\"y\":189,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":216,\"y\":191,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":217,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":219,\"y\":196,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":220,\"y\":200,\"isMovable\":false}],\"interval\":11644},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":221,\"y\":204,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":222,\"y\":207,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":223,\"y\":211,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":213,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":214,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":215,\"isMovable\":false}],\"interval\":11744},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":224,\"y\":215,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":216,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":220,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":222,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":224,\"isMovable\":false}],\"interval\":11845},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":224,\"y\":225,\"isMovable\":false}],\"interval\":11945},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":224,\"y\":226,\"isMovable\":false}],\"interval\":12046},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":224,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":222,\"isMovable\":false}],\"interval\":12348},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":224,\"y\":218,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":213,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":209,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":204,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":202,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":224,\"y\":201,\"isMovable\":false}],\"interval\":12448},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":224,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":225,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":225,\"y\":198,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":198,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":227,\"y\":196,\"isMovable\":false}],\"interval\":12549},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":228,\"y\":194,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":230,\"y\":192,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":231,\"y\":191,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":234,\"y\":189,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":235,\"y\":188,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":237,\"y\":187,\"isMovable\":false}],\"interval\":12649},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":240,\"y\":186,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":241,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":243,\"y\":184,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":244,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":245,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":246,\"y\":183,\"isMovable\":false}],\"interval\":12749},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":247,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":248,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":249,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":250,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":251,\"y\":183,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":251,\"y\":184,\"isMovable\":false}],\"interval\":12849},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":251,\"y\":185,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":252,\"y\":186,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":253,\"y\":187,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":253,\"y\":189,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":254,\"y\":191,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":255,\"y\":193,\"isMovable\":false}],\"interval\":12950},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":255,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":256,\"y\":198,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":257,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":257,\"y\":203,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":257,\"y\":208,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":258,\"y\":210,\"isMovable\":false}],\"interval\":13050},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":259,\"y\":214,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":260,\"y\":216,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":261,\"y\":218,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":261,\"y\":220,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":261,\"y\":220,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":261,\"y\":221,\"isMovable\":false}],\"interval\":13151},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":261,\"y\":222,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":261,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":261,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":262,\"y\":226,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":262,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":262,\"y\":230,\"isMovable\":false}],\"interval\":13251},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":262,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":262,\"y\":233,\"isMovable\":false}],\"interval\":13352},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":262,\"y\":234,\"isMovable\":false}],\"interval\":13453}]}]<\/textarea><\/pre>\n<p>-Ram Kulkarni<\/p>\n<h2>Update :<\/h2>\n<p>See the updated version of code and example (with features to set stroke color and size) in my blog post <a href=\"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas-part-ii\/\" title=\"Record and Playback Drawing in HTML5 Canvas \u2013 Part II\">Record and Playback Drawing in HTML5 Canvas &#8211; Part II<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/deserializing-recordings-in-recordable-html5-canvas\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;De\/Serializing Recordings in Recordable HTML5 Canvas&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"De\/Serializing Recording in Recordable HTML5 Canvas http:\/\/wp.me\/p2g9O8-dV","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[10,20,1],"tags":[9,11,51,52],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-dV","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/863"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=863"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/863\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=863"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}