{"id":1072,"date":"2014-01-14T16:54:05","date_gmt":"2014-01-14T11:24:05","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1072"},"modified":"2014-01-14T16:54:05","modified_gmt":"2014-01-14T11:24:05","slug":"record-and-playback-drawing-in-html5-canvas-part-ii","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas-part-ii\/","title":{"rendered":"Record and Playback Drawing in HTML5 Canvas &#8211; Part II"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/jquery-1.10.1.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/app-script.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/drawingSerializer.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/RecordableDrawing.js\"><\/script><\/p>\n<style >\n#colorsDiv .colorbox {\n\t\twidth:20px;\n\t\theight:20px;\n\t\tmargin: 0 auto;\n\t\tmargin-top:5px;\n}.selectedColor {\n\t\tborder-style:solid;\n\t\tborder-width:2px;\n\t\tborder-color:#7c2aff;\n\t\tborder-radius:5px;\n}#colorsDiv .colorbox:not(.selectedColor)\n{\n\t\tborder-style:solid;\n\t\tborder-color:black;\n\t\tborder-width:1px;\n\t\twidth:15px;\n\t\theight:15px;\n}#colorsDiv {\n\t\tmargin-left:5px;\n}#canvas1 {\n\t\tfloat:left;\n}.stroke {\n\t\twidth:0px;\n\t\theight:0px;\n\t\tborder-style:solid;\n\t\tmargin: 0 auto;\n\t\tmargin-top: 5px;\n\t\tborder-color:#cccccc;\n}.stroke_selected\n{\n\tborder-color:black;\n}\n<\/style>\n<p>A reader of my blog post\u00a0<a title=\"De\/Serializing Recordings in Recordable HTML5 Canvas\" href=\"http:\/\/ramkulkarni.com\/blog\/deserializing-recordings-in-recordable-html5-canvas\/\" target=\"_blank\">De\/Serializing Recordings in Recordable HTML5 Canvas<\/a>\u00a0had asked me how to change stroke color and size when recording. I told him that this could be done by adding actions, like setColor and setStrokeSize. For more information about how the recordable canvas was implemented, see my blog post\u00a0<a title=\"Record and Playback Drawing in HTML5 Canvas\" href=\"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas\/\" target=\"_blank\">Record and Playback Drawing in HTML5 Canvas<\/a>\u00a0. I have updated the example with following new features &#8211;<\/p>\n<ul>\n<li>Setting stroke color and size &#8211; both for drawing and recording<\/li>\n<li>Pausing and resuming recording. You may want to pause recording if, for example, you do not want to record time delay when you select stroke color\/size. Duration of time that the recording is paused is skipped when playing back the recording.<\/li>\n<\/ul>\n<p>Here is the demo of how the new features work. Select a color by clicking on any color box on the right side of the canvas. Default selection is black. Currently selected color is displayed in a little bigger box with rounded corner. To select stroke size, I have added a few predefined circles of different sizes on the right side. Currently selected stroke size is displayed in black.<\/p>\n<p><!--more--><\/p>\n<div id=\"drawingDiv\" style=\"height:400px\">\n\t<canvas id=\"canvas1\" width=\"400px\" height=\"400px;float:left\" style=\"border:medium;border-color:#00F;border-style:solid;\"><\/canvas><\/p>\n<div style=\"float:left\" id=\"colorsDiv\">\n\t\tColors :<\/p>\n<div class=\"colorbox selectedColor\" id=\"blackbox\" style=\"background-color:black\" ><\/div>\n<div class=\"colorbox\" id=\"redbox\" style=\"background-color:red;\"><\/div>\n<div class=\"colorbox\" id=\"bluebox\" style=\"background-color:blue;\"><\/div>\n<div class=\"colorbox\" id=\"whitebox\" style=\"background-color:white;\"><\/div>\n<div class=\"colorbox\" id=\"greenbox\" style=\"background-color:green;\"><\/div>\n<div>\n<br \/>\n\t\tStoke Size :<\/p>\n<div class=\"stroke stroke_selected\" style=\"border-radius:3px;border-width:3px;\"><\/div>\n<div class=\"stroke\" style=\"border-radius:6px;border-width:5px;\"><\/div>\n<div class=\"stroke\" style=\"border-radius:8px;border-width:7px;\"><\/div>\n<div class=\"stroke\" style=\"border-radius:12px;border-width:10px;\"><\/div>\n<div class=\"stroke\" style=\"border-radius:16px;border-width:13px;\"><\/div>\n<div class=\"stroke\" style=\"border-radius:18px;border-width:15px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><\/p>\n<div id=\"canvasBtnsDiv\">\n<input type=\"button\" id=\"recordBtn\" value=\"Record\"><input type=\"button\" id=\"playBtn\" value=\"Play\"><input type=\"button\" id=\"pauseBtn\" value=\"Pause\"><input type=\"button\" id=\"clearBtn\" value=\"Clear\"><br \/><input type=\"button\" id=\"serializeBtn\" value=\"Serialize\"><\/input><input type=\"button\" id=\"deserializeBtn\" value=\"Deserialize\"><\/input>\n<\/div>\n<div id=\"serializerDiv\" style=\"display:none\">\n<textarea rows=\"8\" cols=\"60\" id=\"serDataTxt\"><\/textarea><br \/><input type=\"button\" id=\"cancelBtn\" value=\"Close\"><\/input><input type=\"submit\" id=\"okBtn\" value=\"Submit\"><\/input>\n<\/div>\n<p>After you select color and stroke size, draw a few stroke on the canvas. You can change color and stroke size any time during recording. Click pause before you change stroke color\/size so that time delay is not added to the recording. Don&#8217;t forget to click resume button after you are done selecting stroke color\/size.<\/p>\n<p>As in my post\u00a0<a title=\"De\/Serializing Recordings in Recordable HTML5 Canvas\" href=\"http:\/\/ramkulkarni.com\/blog\/deserializing-recordings-in-recordable-html5-canvas\/\" target=\"_blank\">De\/Serializing Recordings in Recordable HTML5 Canvas<\/a>, I am making a test serialized recording data available below. To see how deserialization with new features work, copy the data, \u00a0click Deserialize button, paste the data in the text box and click Submit. The pre-recorded strokes with different colors and sizes will be played back in the Canvas.<\/p>\n<pre><textarea style=\"margin: 1.80398px; width: 516px; height: 126px;\" cols=\"80\" rows=\"6\">[{\"actionsets\":[{\"actions\":[{\"actionType\":2,\"color\":\"rgb(255, 0, 0)\"},{\"actionType\":3,\"size\":5}],\"interval\":101},{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":40,\"y\":121,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":40,\"y\":121,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":40,\"y\":126,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":40,\"y\":140,\"isMovable\":false}],\"interval\":1213},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":41,\"y\":154,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":41,\"y\":168,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":43,\"y\":181,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":43,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":43,\"y\":212,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":43,\"y\":221,\"isMovable\":false}],\"interval\":1313},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":43,\"y\":229,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":43,\"y\":235,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":42,\"y\":242,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":42,\"y\":250,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":42,\"y\":254,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":41,\"y\":258,\"isMovable\":false}],\"interval\":1414},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":41,\"y\":260,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":41,\"y\":261,\"isMovable\":false}],\"interval\":1514},{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":43,\"y\":128,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":44,\"y\":128,\"isMovable\":false}],\"interval\":2725},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":47,\"y\":126,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":51,\"y\":122,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":55,\"y\":120,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":58,\"y\":119,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":59,\"y\":118,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":60,\"y\":117,\"isMovable\":false}],\"interval\":2826},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":63,\"y\":117,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":67,\"y\":117,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":70,\"y\":118,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":74,\"y\":121,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":78,\"y\":126,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":80,\"y\":131,\"isMovable\":false}],\"interval\":2926},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":83,\"y\":137,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":85,\"y\":141,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":86,\"y\":147,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":86,\"y\":152,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":86,\"y\":158,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":86,\"y\":165,\"isMovable\":false}],\"interval\":3027},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":84,\"y\":172,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":81,\"y\":179,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":78,\"y\":186,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":76,\"y\":190,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":74,\"y\":193,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":72,\"y\":195,\"isMovable\":false}],\"interval\":3127},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":71,\"y\":197,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":70,\"y\":198,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":67,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":64,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":60,\"y\":202,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":58,\"y\":204,\"isMovable\":false}],\"interval\":3228},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":54,\"y\":205,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":53,\"y\":205,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":52,\"y\":205,\"isMovable\":false}],\"interval\":3328},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":51,\"y\":205,\"isMovable\":false}],\"interval\":3429},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":51,\"y\":205,\"isMovable\":false}],\"interval\":3531},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":51,\"y\":206,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":54,\"y\":210,\"isMovable\":false}],\"interval\":3632},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":59,\"y\":214,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":66,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":74,\"y\":224,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":79,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":83,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":86,\"y\":233,\"isMovable\":false}],\"interval\":3733},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":88,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":89,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":90,\"y\":237,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":90,\"y\":239,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":94,\"y\":241,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":95,\"y\":243,\"isMovable\":false}],\"interval\":3834},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":97,\"y\":245,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":98,\"y\":247,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":99,\"y\":248,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":100,\"y\":249,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":101,\"y\":250,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":101,\"y\":250,\"isMovable\":false}],\"interval\":3935},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":101,\"y\":251,\"isMovable\":false}],\"interval\":4036},{\"actions\":[{\"actionType\":2,\"color\":\"rgb(0, 0, 255)\"},{\"actionType\":3,\"size\":7}],\"interval\":5090},{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":136,\"y\":202,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":136,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":133,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":131,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":127,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":124,\"y\":200,\"isMovable\":false}],\"interval\":5999},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":122,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":121,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":120,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":119,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":118,\"y\":201,\"isMovable\":false}],\"interval\":6100},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":117,\"y\":202,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":114,\"y\":205,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":113,\"y\":210,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":112,\"y\":212,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":111,\"y\":216,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":111,\"y\":219,\"isMovable\":false}],\"interval\":6201},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":111,\"y\":222,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":111,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":111,\"y\":227,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":111,\"y\":230,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":112,\"y\":232,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":115,\"y\":236,\"isMovable\":false}],\"interval\":6302},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":118,\"y\":239,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":121,\"y\":241,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":123,\"y\":243,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":124,\"y\":243,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":125,\"y\":244,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":126,\"y\":244,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":127,\"y\":244,\"isMovable\":false}],\"interval\":6403},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":128,\"y\":241,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":131,\"y\":235,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":133,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":135,\"y\":226,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":138,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":138,\"y\":222,\"isMovable\":false}],\"interval\":6504},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":139,\"y\":221,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":139,\"y\":221,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":139,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":140,\"y\":216,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":140,\"y\":213,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":140,\"y\":210,\"isMovable\":false}],\"interval\":6605},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":140,\"y\":208,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":140,\"y\":208,\"isMovable\":false},\n{\"type\":1,\"actionType\":1,\"x\":139,\"y\":208,\"isMovable\":false}],\"interval\":6707},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":139,\"y\":207,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":139,\"y\":206,\"isMovable\":false}],\"interval\":6808},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":139,\"y\":207,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":210,\"isMovable\":false}],\"interval\":7011},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":141,\"y\":213,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":215,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":141,\"y\":217,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":142,\"y\":218,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":142,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":142,\"y\":220,\"isMovable\":false}],\"interval\":7113},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":142,\"y\":221,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":142,\"y\":222,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":143,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":144,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":145,\"y\":226,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":146,\"y\":227,\"isMovable\":false}],\"interval\":7213},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":147,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":148,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":148,\"y\":229,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":149,\"y\":229,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":150,\"y\":230,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":151,\"y\":230,\"isMovable\":false}],\"interval\":7314},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":151,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":153,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":154,\"y\":232,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":155,\"y\":233,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":156,\"y\":234,\"isMovable\":false}],\"interval\":7415},{\"actions\":[{\"actionType\":2,\"color\":\"rgb(0, 128, 0)\"},{\"actionType\":3,\"size\":11}],\"interval\":8655},{\"actions\":[{\"type\":0,\"actionType\":1,\"x\":165,\"y\":197,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":166,\"y\":201,\"isMovable\":false}],\"interval\":9766},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":167,\"y\":208,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":168,\"y\":213,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":169,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":169,\"y\":222,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":170,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":170,\"y\":228,\"isMovable\":false}],\"interval\":9867},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":170,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":170,\"y\":229,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":170,\"y\":230,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":170,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":170,\"y\":232,\"isMovable\":false}],\"interval\":9969},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":171,\"y\":235,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":171,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":171,\"y\":237,\"isMovable\":false}],\"interval\":10070},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":171,\"y\":236,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":171,\"y\":231,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":173,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":176,\"y\":214,\"isMovable\":false}],\"interval\":10171},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":179,\"y\":208,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":181,\"y\":203,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":181,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":181,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":182,\"y\":199,\"isMovable\":false}],\"interval\":10272},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":183,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":184,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":186,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":189,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":192,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":194,\"y\":199,\"isMovable\":false}],\"interval\":10372},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":196,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":197,\"y\":199,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":197,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":197,\"y\":203,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":197,\"y\":208,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":198,\"y\":212,\"isMovable\":false}],\"interval\":10472},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":198,\"y\":216,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":198,\"y\":218,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":199,\"y\":219,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":199,\"y\":221,\"isMovable\":false}],\"interval\":10574},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":199,\"y\":222,\"isMovable\":false}],\"interval\":10777},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":200,\"y\":221,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":201,\"y\":218,\"isMovable\":false}],\"interval\":10878},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":205,\"y\":212,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":208,\"y\":207,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":211,\"y\":203,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":212,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":214,\"y\":197,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":216,\"y\":196,\"isMovable\":false}],\"interval\":10979},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":216,\"y\":196,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":219,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":221,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":223,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":225,\"y\":195,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":225,\"y\":196,\"isMovable\":false}],\"interval\":11079},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":225,\"y\":197,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":225,\"y\":200,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":225,\"y\":201,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":203,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":205,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":208,\"isMovable\":false}],\"interval\":11180},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":226,\"y\":211,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":212,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":213,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":214,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":226,\"y\":215,\"isMovable\":false}],\"interval\":11282},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":227,\"y\":216,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":227,\"y\":217,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":228,\"y\":218,\"isMovable\":false}],\"interval\":11382},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":229,\"y\":220,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":229,\"y\":222,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":230,\"y\":223,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":230,\"y\":224,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":230,\"y\":224,\"isMovable\":false}],\"interval\":11483},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":231,\"y\":225,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":231,\"y\":226,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":231,\"y\":227,\"isMovable\":false}],\"interval\":11584},{\"actions\":[{\"type\":1,\"actionType\":1,\"x\":231,\"y\":228,\"isMovable\":false},{\"type\":1,\"actionType\":1,\"x\":231,\"y\":229,\"isMovable\":false}],\"interval\":11685}]}]<\/textarea><\/pre>\n<h2>Implementation of SetColor and SetStrokesize<\/h2>\n<p>I have added two JS (action) objects at the end of file <a href=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/RecordableDrawing.js\" target=\"_blank\">RecordableDrawing.js<\/a> &#8211;<\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\">SetColor <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (colorValue)\n{\n\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> self <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">this<\/span>;\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.color <span style=\"color: #666666;\">=<\/span> colorValue;\n\n\tAction.call(<span style=\"color: #008000; font-weight: bold;\">this<\/span>,_SET_COLOR_ACTION);\n}\nSetColor.prototype <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> Action();\n\nSetStokeSize <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (sizeArg)\n{\n\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> self <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">this<\/span>;\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.size <span style=\"color: #666666;\">=<\/span> sizeArg;\n\n\tAction.call(<span style=\"color: #008000; font-weight: bold;\">this<\/span>,_SET_STOKE_SIZE);\n}\nSetStokeSize.prototype <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> Action();<\/pre>\n<\/div>\n<p>Added two methods setColor and setStrokeSize to&nbsp;RecordableDrawing object &#8211;<\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\">RecordableDrawing <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (canvasId) {\n\t...\n       <span style=\"color: #008000; font-weight: bold;\">this<\/span>.setColor <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (color)\n\t{\n\t\tself.drawingColor <span style=\"color: #666666;\">=<\/span> color;\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> colorAction <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> SetColor(color);\n\t\tself.actions.push(colorAction);\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (self.currentRecording <span style=\"color: #666666;\">!=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\tself.currentRecording.addAction(colorAction);\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.setStokeSize <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (sizeArg)\n\t{\n\t\tself.currentLineWidth <span style=\"color: #666666;\">=<\/span> sizeArg;\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> sizeAction <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> SetStokeSize(sizeArg);\n\t\tself.actions.push(sizeAction);\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (self.currentRecording <span style=\"color: #666666;\">!=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\tself.currentRecording.addAction(sizeAction);\n\t}\n        ...\n}<\/pre>\n<\/div>\n<p>Above methods create action objects with color\/stroke size data and add them to action set or to the current recording.<\/p>\n<p>Modified drawAction method in RecordableDrawing object. Earlier there was only one Action &#8211; Point. So the function just used to handle action based on type of the Point action (move or line). But now we will have to check actionType (Point\/SetColor\/SetStrokeSize).<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\">_POINT_ACTION <span style=\"color: #666666;\">=<\/span> <span style=\"color: #666666;\">1<\/span>;\n_SET_COLOR_ACTION <span style=\"color: #666666;\">=<\/span> <span style=\"color: #666666;\">2<\/span>;\n_SET_STOKE_SIZE <span style=\"color: #666666;\">=<\/span> <span style=\"color: #666666;\">3<\/span>;\nRecordableDrawing <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (canvasId)\n{\n...\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.drawAction <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (actionArg, addToArray)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">switch<\/span> (actionArg.actionType)\n\t\t{\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> _POINT_ACTION <span style=\"color: #666666;\">:<\/span>\n\t\t\t\tdrawPoint(actionArg);\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">break<\/span>;\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> _SET_COLOR_ACTION <span style=\"color: #666666;\">:<\/span>\n\t\t\t\tself.drawingColor <span style=\"color: #666666;\">=<\/span> actionArg.color;\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">break<\/span>;\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> _SET_STOKE_SIZE<span style=\"color: #666666;\">:<\/span>\n\t\t\t\tself.currentLineWidth <span style=\"color: #666666;\">=<\/span> actionArg.size;\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">default<\/span><span style=\"color: #666666;\">:<\/span>\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">break<\/span>;\n\t\t}\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (addToArray)\n\t\t\tself.actions.push(actionArg);\n\t}\n...\n}<\/pre>\n<\/div>\n<p>Old content of drawAction is now moved to drawPoint function.<\/p>\n<p>Added&nbsp;serializeAction and&nbsp;deserializeAction functions in <a href=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/drawingSerializer.js\" target=\"_blank\">drawingSerializer.js<\/a><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008000; font-weight: bold;\">function<\/span> serializeAction (action)\n{\n\t<span style=\"color: #008000; font-weight: bold;\">switch<\/span> (action.actionType)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> <span style=\"color: #666666;\">1:<\/span> <span style=\"color: #408080; font-style: italic;\">\/\/Point Action<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> serializePoint (action);\n\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> <span style=\"color: #666666;\">2:<\/span> <span style=\"color: #408080; font-style: italic;\">\/\/SeColor Action<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> {actionType <span style=\"color: #666666;\">:<\/span> <span style=\"color: #666666;\">2<\/span>,\n\t\t\t\t\tcolor <span style=\"color: #666666;\">:<\/span> action.color};\n\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> <span style=\"color: #666666;\">3:<\/span> <span style=\"color: #408080; font-style: italic;\">\/\/Set Stroke Size<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> {actionType <span style=\"color: #666666;\">:<\/span> <span style=\"color: #666666;\">3<\/span>,\n\t\t\t\t\tsize <span style=\"color: #666666;\">:<\/span> action.size};\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>;\n}\n\n<span style=\"color: #008000; font-weight: bold;\">function<\/span> deserializeAction (actionWrp)\n{\n\t<span style=\"color: #008000; font-weight: bold;\">switch<\/span> (actionWrp.actionType)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> <span style=\"color: #666666;\">1:<\/span> <span style=\"color: #408080; font-style: italic;\">\/\/Point action<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> deserializePoint(actionWrp);\n\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> <span style=\"color: #666666;\">2:<\/span> <span style=\"color: #408080; font-style: italic;\">\/\/SetColor action<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> SetColor(actionWrp.color);\n\t\t<span style=\"color: #008000; font-weight: bold;\">case<\/span> <span style=\"color: #666666;\">3:<\/span> <span style=\"color: #408080; font-style: italic;\">\/\/Set Stroke Size<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> SetStokeSize(actionWrp.size);\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>;\n}<\/pre>\n<\/div>\n<h2>Adding support for pause and resume of recording<\/h2>\n<p>I now keep track of total pause time during recording. And before adding action set in the linked list (see <a title=\"Record and Playback Drawing in HTML5 Canvas\" href=\"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas\/\" target=\"_blank\">Record and Playback Drawing in HTML5 Canvas<\/a>&nbsp;to understand&nbsp;how recording is stored ), time interval for the action set is set to (current time) &#8211; (time when recording started) &#8211; (total time paused). This is how onInterval function of Recording object (in&nbsp;<a href=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/RecordableDrawing.js\" target=\"_blank\">RecordableDrawing.js<\/a>) looks now &#8211;<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\">\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.onInterval <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span>()\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (self.buffer.length <span style=\"color: #666666;\">&gt;<\/span> <span style=\"color: #666666;\">0<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> timeSlot <span style=\"color: #666666;\">=<\/span> (<span style=\"color: #008000; font-weight: bold;\">new<\/span> <span style=\"color: #008000;\">Date<\/span>()).getTime() <span style=\"color: #666666;\">-<\/span> self.recStartTime <span style=\"color: #666666;\">-<\/span> totalPauseTime;\n\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (self.currActionSet <span style=\"color: #666666;\">==<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\t{\n\t\t\t\tself.currActionSet <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> ActionsSet(timeSlot, self.buffer);\n\t\t\t\tself.actionsSet <span style=\"color: #666666;\">=<\/span> self.currActionSet;\n\t\t\t}\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">else<\/span>\n\t\t\t{\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> tmpActionSet <span style=\"color: #666666;\">=<\/span> self.currActionSet;\n\t\t\t\tself.currActionSet <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> ActionsSet(timeSlot, self.buffer);\n\t\t\t\ttmpActionSet.next <span style=\"color: #666666;\">=<\/span> self.currActionSet;\n\t\t\t}\n\n\t\t\tself.buffer <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> <span style=\"color: #008000;\">Array<\/span>();\n\t\t}\n\t\tself.currTime <span style=\"color: #666666;\">+=<\/span> self.timeInterval;\n\t}<\/pre>\n<\/div>\n<p>Added two methods, pause and resumeRecording, to the Recording object (in&nbsp;<a href=\"http:\/\/ramkulkarni.com\/temp\/2014-01-14\/RecordableDrawing.js\" target=\"_blank\">RecordableDrawing.js<\/a>)<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\">Recording <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (drawingArg)\n{\n\t...\n\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> totalPauseTime <span style=\"color: #666666;\">=<\/span> <span style=\"color: #666666;\">0<\/span>;\n\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> pauseStartTime <span style=\"color: #666666;\">=<\/span> <span style=\"color: #666666;\">0<\/span>;\n\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.pause <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span>()\n\t{\n\t\tpauseStartTime <span style=\"color: #666666;\">=<\/span> (<span style=\"color: #008000; font-weight: bold;\">new<\/span> <span style=\"color: #008000;\">Date<\/span>()).getTime();\n\t\t<span style=\"color: #008000;\">window<\/span>.clearInterval(self.intervalId);\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.resumeRecording <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span>() {\n\t\ttotalPauseTime <span style=\"color: #666666;\">+=<\/span> (<span style=\"color: #008000; font-weight: bold;\">new<\/span> <span style=\"color: #008000;\">Date<\/span>()).getTime() <span style=\"color: #666666;\">-<\/span> pauseStartTime;\n\t\tpauseStartTime <span style=\"color: #666666;\">=<\/span> <span style=\"color: #666666;\">0<\/span>;\n\t\tself.intervalId <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000;\">window<\/span>.setInterval(self.onInterval, self.timeInterval);\n\t}\n\t...\n}<\/pre>\n<\/div>\n<p>Notice calls to clearInterval in pause method and (re) setInterval in resumeRecording method.<\/p>\n<p>Finally, added pauseRecording and resumeRecording methods to RecordableDrawing object. These functions call corresponding methods of current recording object.<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\">RecordableDrawing <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span> (canvasId)\n{\n\t...\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.pauseRecording <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span>()\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (self.currentRecording <span style=\"color: #666666;\">!=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\tself.currentRecording.pause();\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.resumeRecording <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">function<\/span>()\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (self.currentRecording <span style=\"color: #666666;\">!=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\tself.currentRecording.resumeRecording();\n\t}\n\t...\n}<\/pre>\n<\/div>\n<p>\n-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A reader of my blog post\u00a0De\/Serializing Recordings in Recordable HTML5 Canvas\u00a0had asked me how to change stroke color and size when recording. I told him that this could be done by adding actions, like setColor and setStrokeSize. For more information about how the recordable canvas was implemented, see my blog post\u00a0Record and Playback Drawing in &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas-part-ii\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Record and Playback Drawing in HTML5 Canvas &#8211; Part II&#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":"","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,88],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-hi","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1072"}],"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=1072"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1072\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1072"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}