A reader of my blog post De/Serializing Recordings in Recordable HTML5 Canvas had 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 Record and Playback Drawing in HTML5 Canvas . I have updated the example with following new features –
- Setting stroke color and size – both for drawing and recording
- 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.
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.
Stoke Size :
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’t forget to click resume button after you are done selecting stroke color/size.
As in my post De/Serializing Recordings in Recordable HTML5 Canvas, I am making a test serialized recording data available below. To see how deserialization with new features work, copy the data, click 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.
Implementation of SetColor and SetStrokesize
I have added two JS (action) objects at the end of file RecordableDrawing.js –
Added two methods setColor and setStrokeSize to RecordableDrawing object –
Above methods create action objects with color/stroke size data and add them to action set or to the current recording.
Modified drawAction method in RecordableDrawing object. Earlier there was only one Action – 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).
Old content of drawAction is now moved to drawPoint function.
Added serializeAction and deserializeAction functions in drawingSerializer.js
Adding support for pause and resume of recording
I now keep track of total pause time during recording. And before adding action set in the linked list (see Record and Playback Drawing in HTML5 Canvas to understand how recording is stored ), time interval for the action set is set to (current time) – (time when recording started) – (total time paused). This is how onInterval function of Recording object (in RecordableDrawing.js) looks now –
Added two methods, pause and resumeRecording, to the Recording object (in RecordableDrawing.js)
Notice calls to clearInterval in pause method and (re) setInterval in resumeRecording method.
Finally, added pauseRecording and resumeRecording methods to RecordableDrawing object. These functions call corresponding methods of current recording object.