Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It’s basically a simple demo for canvas’ imageData functionality.

This script works on any image. According to the HTML5 spec, browsers prevent the usage of getImageData() on any externally hosted image, but (largely thanks to the contributions of John Schulz, using Max Novakovic’s getImageData API) Close Pixelate has built-in methods to get around this security feature.

Options

The function accepts an array of objects. Each object holds a set of options.

* resolution : The distance in pixels between rendered pixels. Required.
* shape : The shape of the pixel. Accepts square, circle, and diamond. Optional. Defaults to square.
* size : The size in pixels of the rendered pixel. Optional. Defaults to value of resolution.
* offset : Offset in pixels. Optional. Defaults to 0. Can be a single value 15 for a diagonal offset, or an array or object for X/Y pairs: [ 15, 5 ] or { x: 15, y: 5 }.
* alpha : A decimal value for the opacity of the rendering. Optional. Defaults to 1.