HTML5 Game - Creating a pixelated image focus

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image Data

Introduction

The following code shows how to do image pixelation by pixelating an image less and less until it's completely focused.

WARNING

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

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            function focusImage(canvas, context, imageObj, pixelation){
                let sourceWidth = imageObj.width;
                let sourceHeight = imageObj.height;
                let sourceX = canvas.width / 2 - sourceWidth / 2;
                let sourceY = canvas.height / 2 - sourceHeight / 2;
                let destX = sourceX;/*w  w w.  j  a  v a2s  .  c o m*/
                let destY = sourceY;
                
                let imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
                let data = imageData.data;
                
                for (let y = 0; y < sourceHeight; y += pixelation) {
                    for (let x = 0; x < sourceWidth; x += pixelation) {
                        let red = data[((sourceWidth * y) + x) * 4];
                        let green = data[((sourceWidth * y) + x) * 4 + 1];
                        let blue = data[((sourceWidth * y) + x) * 4 + 2];
                        
                        for (let n = 0; n < pixelation; n++) {
                            for (let m = 0; m < pixelation; m++) {
                                if (x + m < sourceWidth) {
                                    data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
                                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
                                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
                                }
                            }
                        }
                    }
                }
                // overwrite original image
                context.putImageData(imageData, destX, destY);
            }
            
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
                let fps = 60; // frames / second
                let timeInterval = 1000 / fps; // milliseconds
                                
                let pixelation = 50;
                
                let imageObj = new Image();
                imageObj.onload = function(){
                    let sourceWidth = imageObj.width;
                    let sourceHeight = imageObj.height;
                    let destX = canvas.width / 2 - sourceWidth / 2;
                    let destY = canvas.height / 2 - sourceHeight / 2;
                    
                    let intervalId = setInterval(function(){
                        context.drawImage(imageObj, destX, destY);
                        
                        if (pixelation < 1) {
                            clearInterval(intervalId);
                        }
                        else {
                            focusImage(canvas, context, imageObj, pixelation--);
                        }
                    }, timeInterval);
                };
                imageObj.src = "http://java2s.com/style/download.png";
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Note

Pixelation of an image happends when the human eye can detect the individual pixels on the image.

To pixelate an image, take color of the image and draw oversized pixels in its place.

As pixels need to be square, we can construct pixel sizes of 1 by 1 (standard pixel size), 2 by 2, 3 by 3, 4 by 4, and so on.

The code uses the following equations to pick out the RGBA components of a pixel based on the x, y coordinates: 

let red = data[((sourceWidth * y) + x) * 4]; 
let green = data[((sourceWidth * y) + x) * 4 + 1]; 
let blue = data[((sourceWidth * y) + x) * 4 + 2];

Then we use setInterval() to render a series of pixelated images over time.

Each successive pixelated image is less pixelated than the previous image, until the pixilation value equals 0 and the image is restored to its original state.

Related Topic