Pixel Manipulation - Gray scale Images

HTML5 canvas demos

by Dan Wahlin

HTML

Canvas Image (gray scale pixel manipulation)
<br />
<canvas id="myCanvas" width="400" height="300" />

JavaScript

var canvas, ctx, height, width;
$(document).ready(function() {
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
    height = canvas.height;
    width = canvas.width;
    
    var img = new Image();
    img.onload = function() {
        generateImage();
        ctx.drawImage(img, canvas.width/2 - img.width/2, 
                      canvas.height/2 - img.height/2, 150, 25);
        grayScale();
    };
    img.src = '/img/logo.png';
});

function generateImage() {
    var pixelData = ctx.createImageData(width, height);
    var xCenter = width / 2; 
    var yCenter = height / 2;
    var pixelPos = 0;
    for (var y = 0; y < pixelData.height; y++) {
        for (var x = 0; x < pixelData.width; x++) {
            var xOffset = x - xCenter;
            var yOffset = y - yCenter;
            var d = Math.abs(xOffset) + Math.abs(yOffset); 
            var t = Math.tan(d/10);
    
            var r = t * 255;
            var g = 125 + t * 80;
            var b = 235 + t * 20;
    
            pixelData.data[pixelPos++] = Math.max(0,Math.min(255, r));
            pixelData.data[pixelPos++] = Math.max(0,Math.min(255, g));
            pixelData.data[pixelPos++] = Math.max(0,Math.min(255, b));
            pixelData.data[pixelPos++] = Math.random() * 1000; 
        }
    }
    
    ctx.putImageData(pixelData, 0, 0); 
}

function grayScale() {
    var pixelData = ctx.getImageData(0, 0, width, height);
    var data = pixelData.data;
    for (var i=0; i<data.length; i+=4) {  
         var gray = data[i] * .3 + data[i+1] * .59 + data[i+2] * .11;
        
         data[i] = gray; //red pixel
         data[i+1] = gray; //green pixel
         data[i+2] = gray; //blue pixel
    }
    
    ctx.putImageData(pixelData, 0, 0); 
}