Fun with HTML5 Canvas ( HTML5 Canvas Free Hand drawing)
Fork the code at Github
I have worked on HTML5 Canvas before, for building a Flow Control design application. It was built entirely on HTML and Canvas with jQuery to support.
This is my second trial. What i have tried to build is Free hand drawing tool using Canvas. It is easy to achieve this. The only issue with Canvas is that once a stroke have been made there is no way to edit it, Or make any alterations to the content of the Canvas.
Building a drawing tool will require some additional options like Color selection and Brush size. But the real fun started when i tried adding the Undo Button. I thought it was not possible. But one of a great feature of Canvas made it easy.
Canvas contents can be exported as data.
canvas = document.getElementById('id-of-canvas'); var imageData = canvas.toDataURL('file-encoding'); //Encoding can be image/png or image/jpg //I Think more formats are supportedThe idea was to cache the data when ever the user makes a change. Its similar to take a snapshot of the canvas each time the user makes a change. And when the user presses the undo button, we just have to clear the canvas and load the imageData to it.