HTML5 canvas pixelate effect

HTML5 canvas pixelate effect

3 262
HTML5 canvas pixelate effect

HTML5 canvas pixelate effect

New great HTML5 tutorial – I going to tell you about creating pixelate photo effect with html5 (at canvas). More, this is not static effect, but it will pixelating all time.

Here are our demo and downloadable package:

Live Demo
download in package

Ok, download the source files and lets start coding !


Step 1. HTML

As usual – very small HTML code

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 pixelate effect | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 pixelate effect</h2>
            <a href="http://www.script-tutorials.com/html5-canvas-pixelate-effect/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="contr">
                <input type="radio" name="mode" onchange="changeMode(0)" checked /><label>Original image</label>
                <input type="radio" name="mode" onchange="changeMode(1)" /><label>Opacity channel</label>
                <input type="radio" name="mode" onchange="changeMode(2)" /><label>White channel</label>
                <input type="radio" name="mode" onchange="changeMode(3)" /><label>Color channel</label>
            </div>
            <canvas id="panel" width="800" height="600"></canvas>
        </div>
    </body>
</html>

Step 2. CSS

css/main.css

I am not sure if this is necessary to publish layout page styles today, lets keep it in package today, ok?

Step 3. JS

js/script.js

// variables
var canvas, ctx;
var imgObj;
var imgd;
var iOpSize = 40;
var iMode = 0;
var iCDif = 80;
var r0, r1, r2, r3, r4, r5, r6 = 0;

// util functions
function changeMode(i) {
    iMode = i;
}
function getRand(x, y) {
    return Math.floor(Math.random()*y)+x;
}

// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // draw original image
    ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height);
    if (iMode) {
        // .. and get its data
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imgd.data;

        for (var y = 0; y < canvas.height; y+=iOpSize){
            for (var x = 0; x < canvas.width; x+=iOpSize){

                // different modes
                if (iMode == 1) {
                    r0 = 55 + Math.random() * 200;
                    r1 = r2 = r3 = r4 = r5 = r6 = 0;
                } else if (iMode == 2) {
                    r0 = 255;
                    r1 = r3 = r5 = getRand(-iCDif, iCDif * 2);
                    r2 = r4 = r6 = getRand(0, iCDif);
                } else if (iMode == 3) {
                    r0 = 255;
                    r1 = getRand(-iCDif, iCDif * 2);
                    r2 = getRand(0, iCDif);
                    r3 = getRand(-iCDif, iCDif * 2);
                    r4 = getRand(0, iCDif);
                    r5 = getRand(-iCDif, iCDif * 2);
                    r6 = getRand(0, iCDif);
                }

                for (var y2 = 0; y2 < iOpSize; y2++){
                    for (var x2 = 0; x2 < iOpSize; x2++){
                        var i = ((y + y2) * canvas.width + x + x2) * 4;

                        data[i+0] = data[i+0] - r1 + r2;
                        data[i+1] = data[i+1] - r3 + r4;
                        data[i+2] = data[i+2] - r5 + r6;
                        data[i+3] = r0;
                    }
                }
            }
        }

        ctx.putImageData(imgd, 0, 0);
    }
}

// binding onload event
if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}

function main_init() {

    // creating canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // loading source image
    imgObj = new Image();
    imgObj.onload = function () {
        ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); // Draw the image on the canvas
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
    }
    imgObj.src = 'images/01.jpg';

    setInterval(drawScene, 150); // loop drawScene // 30
}

How to pixelate? I have thinking for some time, and understood that this is not so difficult. We will split our image to sub-regions, and then, we will change colors (or opacity) of each region separately.


Live Demo
download in package

Conclusion

Today’s lesson has turned a simple and interesting, isn’t it? Welcome back to read something new and interesting. Good luck in your projects.

SIMILAR ARTICLES


3 COMMENTS

    • Hello Sana,
      Unfortunately ‘getContext’ is not supported in IE8. This outdated browser doesn’t work with HTML5 (canvas)

Leave a Reply