Pixelating Images Using jQuery and Canvas - pixel-flow

File Size: 803 KB
Views Total: 3019
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Pixelating Images Using jQuery and Canvas - pixel-flow

pixel-flow is a jQuery image filter plugin that helps you implement pixelating effects on any images using Html5 canvas.

See also:


$ npm install pixel-flow jquery  --save

How to use it:

1. Load the latest version of jQuery library and the jQuery pixel-flow plugin in the html document.

<script src="jquery.min.js"></script>
<script src="scripts/pixel-flow.js"></script>

2. Load the GSAP's TweenMax.js in the document if you wish to implement animated pixelating effects on the images.

<script src="TweenMax.min.js"></script>

3. Pixalate the image you provide.

var $pixel = $('img').PixelFlow()

4. Animate the pixelated images back to normal over 2 seconds.

$('canvas').PixelFlow('simpleanimate', 0, 2000)

5. Available options to create custom pixelating effects.

var $pixel = $('img').PixelFlow({
    resolution: 16,
    offsetX: 0,
    offsetY: 0



  • added vanilla JavaScript version


  • bugfix


  • corrected implementation of requestAnimationFrame


This awesome jQuery plugin is developed by JamesNimlos. For more Advanced Usages, please check the demo page or visit the official website.