Transition canvas img from grayscale to color

canvas_color_fade.js

(function() {
  var supportsCanvas = !!document.createElement('canvas').getContext;
  supportsCanvas && (window.onload = greyImages);

  function greyImages() {
    var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
    img = document.getElementById('cvs-src'),
    imageData, px, length, i = 0,
    red, green, blue, grey;

    ctx.drawImage(img, 0, 0);

    imageData = ctx.getImageData(0, 0, 500, 500);
    px = imageData.data;
    length = px.length;

    for ( ; i < length; i+= 4 ) {
      // rgbargbargbargba
      grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
      px[i] = px[i+1] = px[i+2] = grey;
    }

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