title: Fade canvas video from greyscale to color
body: <p>I have 2 elements - video and canvas. On video play event, a functions draws the same video on canvas only greyscale. Then I have a button which is supposed to fade canvas video from greyscale back to color. So far I've managed to get back colors on button click, but I need it to fade - from greyscale to color, not just instantly show color.</p>
  
  <p>Any ideas on how could I accomplish that? Or.. is it even possible?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>function grey() {
      if (!stop) {
      bgContext.drawImage(video, 0, 0, w, h);
      var pixelData = bgContext.getImageData(0, 0, w, h);
      for (var i = 0; i &lt; pixelData.data.length; i += 4 ) {
          var r = pixelData.data[i];
          var g = pixelData.data[i+1];
          var b = pixelData.data[i+2];
          var averageColour = (r + g + b) / 3;
          pixelData.data[i] = averageColour;
          pixelData.data[i+1] = averageColour;
          pixelData.data[i+2] = averageColour;
      }
      context.putImageData(pixelData, 0, 0);
      }
  }
  
  function color() {
      bgContext.drawImage(video, 0, 0, w, h);
      var pixelData = bgContext.getImageData(0, 0, w, h);
      for (var i = 0; i &lt; pixelData.data.length; i += 4 ) {
          var r = pixelData.data[i];
          var g = pixelData.data[i+1];
          var b = pixelData.data[i+2];
          pixelData.data[i] = r;
          pixelData.data[i+1] = g;
          pixelData.data[i+2] = b;
      }
      context.putImageData(pixelData, 0, 0);
  }
  
  video.addEventListener('play', function() {
      setInterval("grey()", 0);
  }, false);
  
  button.addEventListener('click', function() {
      stop = true;
      setInterval("color()", 0);
  }, false);
  </code></pre>