Skip to content
Pixelate an image with <canvas> a la Chuck Close
Branch: master
Clone or download
Pull request Compare This branch is 4 commits ahead of desandro:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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

For video manipulation

 var myPixelation = new ClosePixelation( v, [
   	{ resolution : 8,shape:'circle', video:true, videoW:w, videoH:h }

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.
  • video : Boolean value (true if we want to pixelate video) Required if we want to use video
  • videoW: The desired video width
  • videoH: The desired video height

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

Example using video

function draw() {
    if(v.paused || v.ended){ 
    	return false;
    var myPixelation = new ClosePixelation( video, [
  		 { resolution : 8,shape:'circle', video:true, videoW:w, videoH:h }

    //setTimeout(draw,20);  // alternative
You can’t perform that action at this time.