JavaScript Canvas Image Conversion

At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the 
bat shit crazy price of one billion dollars. Since I wouldn't mind having a bill in my back account, I decided to create an Instagram-style app (which I'll share with you in the future). This post details how you can convert an image to canvas and convert a canvas back to an image.

Convert an Image to Canvas with JavaScript

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
 var canvas = document.createElement("canvas");
 canvas.width = image.width;
 canvas.height = image.height;
 canvas.getContext("2d").drawImage(image, 0, 0);

 return canvas;
}

Convert Canvas to an Image with JavaScript

// Converts canvas to an image
function convertCanvasToImage(canvas) {
 var image = new Image();
 image.src = canvas.toDataURL("image/png");
 return image;
}