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.
Continue reading “Record and Playback Drawing in HTML5 Canvas – Part II”