Pixelation of images using HTML5 Canvas

Close Pixelate is a Javascript library created by David DeSandro that converts an image into a pixelated version using an HTML5 canvas element. The library works with all browsers supporting HTML5 canvas. You can view the online demo below.

The function takes various options, which you can tweak to your taste to render the final image.

  • 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.

You can download the code from GitHub.

image pixelation