{"id":464,"date":"2012-10-04T10:30:09","date_gmt":"2012-10-04T05:00:09","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=464"},"modified":"2012-10-04T10:30:09","modified_gmt":"2012-10-04T05:00:09","slug":"record-and-playback-drawing-in-html5-canvas","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas\/","title":{"rendered":"Record and Playback Drawing in HTML5 Canvas"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2012-10-03\/js\/lib\/jquery-1.7.2.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2012-10-03\/js\/blog_js_script.js\"><\/script><script type=\"text\/javascript\">\/\/ <![CDATA[\nstartScript();\n\/\/ ]]><\/script><\/p>\n<p>A few months back I had created an application that recorded and played back drawings on HTML5 Canvas. For some time now I wanted to refactor the code in that application and create a reusable &#8216;component&#8217; from it. Which is what I did this week.<\/p>\n<p>Go ahead and try the demo first &#8211; Press &#8216;Record&#8217; key below and then draw some strokes\/lines in the box with the mouse (holding down left button). Once you are done, click Stop button. Click &#8216;Play&#8217; button to play back the drawing you just drew. You can pause and resume too.<\/p>\n<p><!--more--><br \/>\n<canvas id=\"canvas1\" style=\"border: medium; border-color: #00F; border-style: solid;\" width=\"500\" height=\"400\"> \u00a0 <\/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\" \/><\/p>\n<p>Interesting piece of code in this application is to record strokes. You would have observed that, when playing back the drawing, the component does not draw all strokes at once, but it plays them backs in the sequence you had drawn, maintaining the time line. To do this, I collect all the strokes that are drawn in a certain time interval (in this application, it is 100 millis) and create a linked list. Each collection (of strokes) in this linked list stores time elapsed from the start of the recording.<\/p>\n<p>When playing back, I use time elapsed in the first collection to start drawing strokes. Each subsequent collection is drawn after the difference between time elapsed for that collection and the previous collection.<\/p>\n<p>You can find all the code in <a href=\"http:\/\/ramkulkarni.com\/temp\/2012-10-03\/js\/blog_js_script.js\" target=\"_blank\">this<\/a> file. &#8216;RecordableDrawing&#8217; is the object you would create by passing id of the canvas &#8211;<\/p>\n<pre style=\"color: #000020; background: #f6f8ff;\">drawing <span style=\"color: #308080;\">=<\/span> <span style=\"color: #200080; font-weight: bold;\">new<\/span> RecordableDrawing<span style=\"color: #308080;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #1060b6;\">canvas1<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #308080;\">)<\/span><span style=\"color: #406080;\">;<\/span><\/pre>\n<p>This object captures strokes and draws them. &#8216;Recording&#8217; object handles time slotting each stroke and playing them back, as described above. &#8216;ActionsSet&#8217; object contains collection of strokes and also time interval from the start of the recording.<\/p>\n<p>If you want Mobile version of this component, created using JQueryMobile, then you can find the demo <a href=\"http:\/\/ramkulkarni.com\/temp\/2012-10-03\/\" target=\"_blank\">here<\/a>. All objects\/functions for drawing are defined in <a href=\"http:\/\/ramkulkarni.com\/temp\/2012-10-03\/js\/RecordableDrawing.js\" target=\"_blank\">RecordableDrawing.js<\/a>.<\/p>\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>A few months back I had created an application that recorded and played back drawings on HTML5 Canvas. For some time now I wanted to refactor the code in that application and create a reusable &#8216;component&#8217; from it. Which is what I did this week. Go ahead and try the demo first &#8211; Press &#8216;Record&#8217; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/record-and-playback-drawing-in-html5-canvas\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Record and Playback Drawing in 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":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"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-7u","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/464"}],"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=464"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/464\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=464"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}