HTML 5 Canvasベースの白黒フィルタ

getImageDataとputImageDataはHTML 5 Canvasの2つの比較的よく使われる2つのAPIである.
getImageDataによりcanvas指定領域の画素点配列が得られ、各画素点はR、G、B、Aの4つの成分を表す4文字を含む.RGB成分の設定を変更し、putImageDataで修正した画素点配列をcanvasに書き込むことで、各種フィルタ効果を実現します.
R、G、Bの3つの成分を平均値とし、この平均値でそれぞれR、G、B成分を設定すると、白黒フィルタが実現され、実現される主なソースコードは以下の通りである.

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var imageData;
var imageDataCopy=context.createImageData(canvas.width, canvas.height); 

function copyCanvasPixels(){     
    for(var i=0; i