December 26, 2010 7 Comments
HTML 5 is awesome. My most favorite feature is the canvas. It has many uses and of them is to allow the users of your website to draw free shapes.
If that’s what your website utilizes the canvas element for, by no doubt you have already identified the need for an ‘undo’ function. Perhaps you have already tried the .save() and .restore() functions, only to realize that they only save and restore the fill style of the drawing shapes.
This is exactly the problem I had, while creating my online Rage Comic Editor. Fortunately, I implemented a solution, which I would like to share with you.
First, and most important, I have an online demo illustrating the tutorial, here. If you are inpatient or want to get straight to the code, feel free to navigate there and ‘view source’. It is well commented and should be self-explanatory.
In the demo I didn’t bother to implement a ‘free hand drawing’ tool. Instead, I have two buttons only – one of them draw lines on the canvas and the other button undoes one step at a time.
Now to the point… The whole technique consists of three parts:
- You need an array, to store the ‘restore points’ (much like Windows Restore Points). We will push states in it, when performing changes on the canvas, and will pop (and restore) states, out of it, when we press the ‘undo’ button. Here is how I have declared it: var restorePoints = ;
- As mentioned, before performing any change on the canvas, we need to store its state. We do this, by calling the toDataURL of the canvas, which exports the current drawing in your canvas, to a (PNG) image, encoded as base64. Basically, we ask the canvas to give us a text representation of the image that is drawn. Now we only need to insert this text, as an element of our restorePoints array. We do this using the restorePoints.push(…) command. The implementation of this step is in the saveRestorePoint() function in the example. Again – you have to call this method, before performing a change on the canvas!
Cheers and Merry Christmas!