HTML5 Canvas Cookbook

Creating a pixelated image focus

Looking for a fancy way to focus an image? How about a pixelated image focus? In this recipe, we'll explore the art of image pixelation by looping through an algorithm that pixelates an image less and less until it's completely focused.

Note

WARNING: This recipe must be run on a web server due to security constraints with the getImageData() method.

Follow these steps to create a pixilation function that slowly focuses an image:

How to do it...

1. Define the focusImage() function which de-pixelates an image based on a pixilation value:

   function focusImage(canvas, context, imageObj, pixelation){ var sourceWidth = imageObj.width; ...