Pixel Manipulation - Basic Gray scale Images

HTML5 canvas demos

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() {
        ctx.drawImage(img, canvas.width/2 - img.width/2, 
                      canvas.height/2 - img.height/2, 150, 25);
        grayScale();
    };
    img.src = '/img/logo.png';
});

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); 
}