canvas の各ピクセルに対して処理を行って、さまざまなエフェクトを実現するには、 getImageData(x0,y0,x1,y1) を使います。 例えば、 var image = ctx.getImageData(0,0,w,h); とした場合、image にはピクセル単位の集合体がオブジェクトとなったもの(イメージデータ)が返ってきます。 このオブジェクトは、「data」というプロパティを持っていて、ここでピクセルデータを保持しています。 「data」プロパティの配列には、各ピクセルのRGBAデータが {R, G, B, A, R, G, B, A, ...} の順番で格納されています。(R = Red, G = Greed, B = Blue, A = Alpha) これがピクセル分だけ続きます。つまり配列の要素数は ピクセル数 x 4 になります。 例えば、Alpha を徐々に