What's It For?

InstaPIXEL is a jQuery plugin that will pixelate an image to an HTML5 canvas element at a given size. Maybe use it to generate high-res abstract art, or what about a resolution-neutral design element or perhaps as a tool to create baseline 2D art assets for 8-bit style games. Your call, friend!

Download InstaPIXEL

Grab the single jquery.instapixel.js file and get going! Here, this should get you started:

  'imgURL' : 'fooBar.png' 

InstaPIXEL on GitHub

Please View, Fork, or Star the source on GitHub if you feel so compelled. Feel free to report issues, bugfixes, or feature requests, too. And share your designs with the rest of us on Twitter using @theLucre or #instapixel


For ye, of 8-bit persuasion

Basic Usage

This plugin will pixelate the attached canvas with any image. Simply call the plugin function from your canvas element and send an image URL as a parameter:

  'imgURL': 'foobar.jpg' 

The plugin is stateful, so you only need to call it once. After the initial call, use the data attribute to interact with the plugin:


One awesome feature is hi-res output. You can have your very own 8-bit abstract art at 12” wide x 300dpi using:

var myDataURL = $('#mycanvas').data('instapixel').output( 12 ); 

Perhaps you should hide the loader when the processing is complete (the big images can take a bit…)

$('#mycanvas').on("hiResProcessed", function() {


imgURL any image url string ‘.jpg’ The image to be loaded and pixelated onto the canvas
debug true / false true Debug mode will output all these great messages to the console
pixelSize any integer > 0 10 The pixelation size drawn, relative to the original image size
resizeCanvas true / false false If true, the canvas element will resize to the original image dimensions
trueSquare true / false false If true, square pixels will be padded to fit the canvas just right


NameSignatureReturn ValueDescription
setSize ( int size ) bool for success/fail set pixel size to draw. does not redraw
getSize none int size gets the current pixel size being drawn
setImage ( str url, [bool redraw] ) none set the image to pixelate. pass true to redraw after async image load
getImage none str url returns the currently drawn image
redraw ( [int size] ) bool for success/fail redraw the pixelated canvas. optional size setting parameter
clear none none clears the parent canvas element
output ( float inches ) dataURL of canvas returns a dataURL image of the current canvas scaled to the number of inches passed (relative to width) @ 300dpi

Event Triggers

‘imageLoaded’ the image has been loaded to memory, check parameter success to confirm
‘imageLoading’ the plugin has started loading the current image
‘imageParsing’ the image pixels are being parsed
‘imageParsed’ the image pixels have been parsed
‘hiResProcessing’ the hi res version of being built into a new dataURL image
‘hiResProcessed’ the hi res image version has been processed into a new dataURL image