Convert Image to Canvas and back HTML5

A person emailed me asking for help on this. So here is a simple example on writing an image to a canvas, drawing a black rectangle beside it and then converting it back to an image using the toDataURL() method. I place the conversion code in the image.onload method instead of using events for the succinctness of the code.

Should look like:

On the left is canvas, on the right is image.

I also rewrote it in jsfiddle using google logo.

You can also find other examples on the MDN, for example here is one about saving a canvas image to file.