[解決済み】canvas要素で要素の不透明度（アルファ、透明度）を変更する方法は？

質問

HTML5を使用する <canvas> 要素で、画像ファイル（PNG、JPEGなど）を読み込み、完全に透過的にキャンバスに描画し、フェードインさせたいと考えています。画像を読み込んでキャンバスに描画する方法はわかったのですが、その不透明度を変更する方法がわかりません。

今のところあるコードはこんな感じです。

var canvas = document.getElementById('myCanvas');
    
if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;
    
    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

誰か、不透明度を変更するために設定するプロパティや呼び出す関数のような正しい方向を教えてくれませんか？

どのように解決するのですか？

プリミティブ図形で描画する場合、透明度を定義するためにアルファでフィルとストロークの色を設定することができますが、この質問に対する答えを探しています。私が今結論している限りでは、これは画像描画には影響しないようです。

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

を設定するのが良いという結論に達しました。 globalCompositeOperation は画像で動作します。

//works with images
ctx.globalCompositeOperation = "lighter";

画像を簡単に染めたり、透明にしたりできるような、第3の色設定方法はないものでしょうか。

EDITです。

さらに調べた結果、画像の透明度は globalAlpha パラメータは、画像を描画する前に指定します。

//works with images
ctx.globalAlpha = 0.5

時間と共にフェードする効果を得たい場合、アルファ値を変更する何らかのループが必要です。これはかなり簡単で、これを実現する一つの方法は setTimeout ループを作成し、そこから時間経過とともにアルファ値を変化させます。