O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Creating a pixelated image focus

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required