Here is a fancy way to focus an image. In this recipe, we'll explore the art of image pixelation by looping through an algorithm that reduces the pixelation until it's completely focused:
The recipe is as follows:
The HTML code:
<html> <head> <script src="pixelation.js"></script> </head> <body onload="init();"> <canvas id="myCanvas" width="578" height="400"></canvas> </body> </html>
The JavaScript code:
function init() { var pixelation = 40; function focusImage(context, imageObj, sourceWidth, sourceHeight, destX, destY) { var sourceX = destX; var sourceY = destY; var imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight); var data = imageData.data; for(var y = 0; y <sourceHeight; y += pixelation) { for(var x = 0; x <sourceWidth; x += pixelation) { var red = data[((sourceWidth * y) + x) * 4]; var green = data[((sourceWidth * y) + x) * 4 + 1]; var blue = data...