Pixelate

by Gwyn Milcote

HTML

<canvas id="canvas" width="800" height="550"></canvas>
<br>
<input id="blocks" type="range" min="1" max="50" value="5">

CSS

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

/// (C) Ken Fyrstenberg Nilsen, Abdias Software, CC3.0-attribute.
var ctx = canvas.getContext('2d'),
    img = new Image(),
    play = false;

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

img.onload = pixelate;

/// some image, we are not struck with CORS restrictions as we
/// do not use pixel buffer to pixelate, so any image will do
//img.src = 'http://i.imgur.com/w1yg6qo.jpg';
img.src = 'https://orig00.deviantart.net/335f/f/2018/170/f/9/testdeer_by_bronzehalo-dcevi3x.jpg';

function pixelate(v) {
    var size = (play ? v : blocks.value) * 0.01,
        w = canvas.width * size,
        h = canvas.height * size;
    ctx.drawImage(img, 0, 0, w, h);
    ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);
}

blocks.addEventListener('change', pixelate, false);