Canvas Grayscale

HTML

<img id="img" style="display: block;"...

JavaScript

(function () {
		var img = document.getElementById('img'),
        w = img.width,
        h = img.height,
        body = document.getElementsByTagName('body')[0];

    var original = document.createElement('canvas');
    original.width = w;
    original.height = h;

    var originalCtx = original.getContext('2d');
    originalCtx.drawImage(img, 0, 0, w, h);
    
    var oldGray = document.createElement('canvas');
    oldGray.width = w;
    oldGray.height = h;
    body.appendChild(oldGray);
	  grayCopy(originalCtx, oldGray.getContext('2d'), w, h, 0.299, 0.587, 0.114);

    var oldGray = document.createElement('canvas');
    oldGray.width = w;
    oldGray.height = h;
    body.appendChild(oldGray);
	  grayCopy(originalCtx, oldGray.getContext('2d'), w, h, 0.2126, 0.7152, 0.0722);
}());

function grayCopy(src, dst, w, h, r, g, b) {
    var srcPixelData = src.getImageData(0, 0, w, h),
        srcData = srcPixelData.data,
        dstPixelData = dst.getImageData(0, 0, w, h),
        dstData = dstPixelData.data;
    
    for (var i = 0; i < srcData.length; i += 4){
        srcData[i] = srcData[i + 1] = srcData[i + 2] = srcData[i] * r + srcData[i + 1] * g + srcData[i + 2] * b;
    }
    
    dst.putImageData(srcPixelData, 0, 0);
}