Javascript: Canvas To Image

Example Code

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

baseimage = new Image();
baseimage.onload = function() {
    ctx.drawImage(baseimage,1,1);    
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById('canvasImg').src = dataURL;
}
baseimage.src = 'what.jpg';

Canvas Blurring Resolve

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false; /// future
canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

Canvas CanvasDoc CanvasToImage CanvasBlurring