ImageDataオブジェクトに対して複数の操作を実行できませんか？

Question

私はいくつかの別々のマスクを使用して画像をマスクするためにキャンバスを使用しようとしています（私はそれらのすべてを別々のImageDataオブジェクトに入れました）。

マスク画像は白黒でアルファチャンネルはありません。私はお互いの上にマスクを重ねる必要があるので、アルファを事前に増やすか、アルファチャンネルに赤のチャンネルを入れる必要があります。

元のイメージに1つのマスクだけを適用しようとするときれいに動作しますが、複数のマスクを使用しようとすると壊れます。私は次のようにしています：

base.iMask = function(cx, imgData, maskLeft, maskRight, maskTop, maskBottom) { 
     var index = 0; 
     var newdata = cx.createImageData(imgData); 

     for (var i=0; i<maskLeft.width; i++) { 
      for (var j=0; j<maskLeft.height; j++) { 
       index = (i*4)*maskLeft.width+(j*4); 

       newdata.data[index+3] = maskLeft.data[index]; 
      } 
     } 

     // The same cycle is repeated for each mask (4 total) 

     return newdata; 

最後のマスクだけが適用されるという問題があります。私は各サイクルの前にputImageDataとgetImageDataを使用しようとしましたが、動作しません！

ImageData（）オブジェクトに対して事前に（un）を実行する関数が私の問題を解決します。何か案は？

Answer 1

固定されていますが、とにかく興味があると思われる人にはお答えします。

問題は、私がピクセルデータを上書きしていたことでした。それは新しいコードです：

var index = 0; 
     for (var i=0; i<maskData.width; i++) { 
      for (var j=0; j<maskData.height; j++) { 
       index = (i*4)*maskData.width+(j*4); 
       maskData.data[index] = 255 - (255*4 - stripeTopData.data[index] - stripeBottomData.data[index] - stripeLeftData.data[index] - stripeRightData.data[index]); 
      } 
     } 

これは、すべての4枚のマスクを組み合わせ、私は私の元の画像をマスクするために、後で使用することができますB & W画像を生成します。