pixel-img

takes an image and pixelates it.

by theoperatore

HTML

<canvas id='playfield' width='500' height='500'>DALAKS DON'T DETECT A BROWSER THAT SUPPORTS THE CANVAS TAG. EXPLAIN!? EXPLAIN!?</canvas>

CSS

* {
    padding:0;
    margin:0;
}

canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -o-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

JavaScript

// get the canvas to draw
var canvas = document.getElementById('playfield'),
    ctx = canvas.getContext('2d');

//turn off image smoothing
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

// app vars
var img = new Image(),
    blockScale = 10;

img.addEventListener('load', function(ev) {
    
    //dimensions of the scaled down image
    var width = canvas.width * (blockScale * 0.01),
        height = canvas.height * (blockScale * 0.01);
    
    //draw the small image
    ctx.drawImage(img, 0,0, width, height);
    
    //draw the small image stretched to full sized canvas
    ctx.drawImage(canvas, 0,0, width, height, 0, 0, canvas.width, canvas.height);
}, false);

img.src='http://placekitten.com/500/500';