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