Now that we've seen how we can manipulate images, let's turn our attention to something more fundamental; capturing images drawn on canvas elements.
As we move more and more into a digital world, there will be occasions when we are asked to "sign" a document electronically, using our computer. It does mean that we shouldn't consider signing anything the morning after a heavy night out, but worse things can happen…! That in mind, let's take a look at how we can capture the image, once the document has been signed.
For this demo, we're going to use the Signature Pad plugin for jQuery, by Thomas Bradley. The plugin is available from http://thomasjbradley.ca/lab/signature-pad. We're going to take it a step further – instead of just signing our name, we will provide an option to save the output as a PNG file, using the canvas.toDataURL()
method.