Resizing a canvas image without blurring it

Question

I have a small image, which I am rendering on a canvas, like this:

ctx.drawImage(img, 0, 0, img.width*2, img.height*2);

I would like this t

Answer 1

Simply turn off canvas' anti-aliasing for images - unfortunately this property is still vendor prefixed so here are the variations:

context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

then draw the image.

Optionally for older versions and browsers which hasn't implemented this yet, you can use CSS instead:

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)
}

ONLINE TEST HERE