javascript - getImageData を使用してキャンバス上の画像の端を薄くした

Question

getImageData を使用して、point(0,0) のアルファが 0 で、point(img.width, img.height) のアルファが 0.5 の画像に放射状のフェード効果を作成しようとしています。

(最後の点のアルファは 1.0 ですが、0.5 だと想像してください。)

forを使用して、ループで線形アルファ増加を作成できました

    imgData.data[i+3]=i/imgData.length;

しかし、左端は（明らかに）ループが繰り返されるにつれてより明確になります。

私は 2 つのループを使用してみました。

    for(var j=0;j<imgData.height;j++){
        for(var i=0;i<imgData.data.length;i+=4){
            imgData.data[i+3] = 0 + 125 * i/imgData.data.length;
            }
    }

しかし、これのパフォーマンスは非常に遅く、私が探しているフェードは実現しません。また、それを適切に行っているかどうかもわかりません。Mozilla Hacks サイトで概説されているように、型指定された配列を使用した Faster Canvas Pixel Manipulationも試しましたが、その方法を使用しても画像はキャンバスに描画されませんでした。（私はChromeを使用しています-それが問題なのか、それとも私のコードなのかはわかりません。）

何か案は？

編集:素晴らしい解決策をくれたmarkEに感謝します-それは美しく速いです。彼へのコメントでこれについて言及しましたが、マークのデモにフェードが描かれているグレースケール画像（私の要件の一部）を作成するための完全なコードは次のとおりです。

    img_width = window.innerWidth/2.5;
    img_height = img_width * (9/16);

    //hidden_ctx is hidden behind a background layer                    
    var g1=hidden_ctx.createRadialGradient(500,500,550,500,500,650);
    g1.addColorStop(0.00,"rgba(0,0,0,0.7)");
    g1.addColorStop(0.30,"rgba(0,0,0,0.35)");
    g1.addColorStop(1.00,"rgba(0,0,0,0.00)");

    hidden_ctx.fillStyle=g1;
    hidden_ctx.fillRect(0, 0, img_width, img_height);

    hidden_ctx.globalCompositeOperation="source-in";

    //custom drawImage method where selected[num] contains
    //contains images & metadata
    drawIt(hidden_ctx, selected[num].image[0], 0, 0, img_width, img_height);

    imgData=hidden_ctx.getImageData(0, 0, img_width, img_height);

    // invert colors
    for (var i=0;i<imgData.data.length;i+=4)
        {
           grayscaled = 0.34 * imgData.data[i] + 0.5 * imgData.data[i + 1] + 0.16 * imgData.data[i + 2];
           imgData.data[i]=grayscaled;
           imgData.data[i+1]=grayscaled;
           imgData.data[i+2]=grayscaled;

        }

    //places the converted image in the lower right corner where 
    //WIDTH/HEIGHT is window.innerWidth/window.innerHeight
    ctx.putImageData(imgData, WIDTH-img_width, HEIGHT-img_height);