Pixelate an image with <canvas> a la Chuck Close
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
img index : add README content Apr 16, 2012
README.mdown README : project link Apr 18, 2012
close-pixelate.js get imgData in try/catch Apr 16, 2012
dolly.html dolly : jpg -> png Apr 16, 2012


Close Pixelate

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.



Example Code

This script works on any same domain image. According to the HTML5 spec, browsers prevent the usage of getImageData() on cross-domain images.

<img id="portrait-image" src="img/portrait.jpg" />

Use the closePixelate method on the image in your script. You can control the output of the rendering by passing in an array of options.

function init() {
    { resolution : 24 },
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
window.addEventListener( 'load', init, false);

Each set of options is an object representing one re-rendering the original image.

The first set of options, { resolution : 24 } directs the script to render a big square pixel every 24 actual pixels. The script uses the exact color value of the one single actual pixel in the center of the big square pixel.

The second set of options uses all available parameters: { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 } Like the first set, the resolution is 24 pixels. The shape of the pixels will be circles. The size of each circle is 16 pixels (each circle will have a radius of 8 pixels). The circles will placed down and to the right by 12 pixels in both directions. Finally all the circles will have an opacity of 0.5, or 50%.


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.

Constructor and methods

var img = document.getElementById('portrait-img');
// create a new Close Pixelation instance with ClosePixelation
// requires two arguments: the original image element
// and an array of options
var myPixelation = new ClosePixelation( img, [
  { resolution : 24 }
// re-render the canvas with different options
  { resolution: 32 },
  { resolution: 16, shape: 'circle', offset: 8 }
// render a single option-set on top
  resolution: 48, alpha: 0.5