グラデーションのところがよくわかりません教えてもらえませんか

__イタリックテキスト__HTML5を参考書で勉強しています。
以下のコードのグラデーションのところがよくわかりません教えてもらえませんか。
自分で調べたことをコメントを入れながら、やってみたのですが特に
「var grad = context.createLinearGradient(0, 0, 0, -h);」から
「grad.addColorStop(0.6, "rgba(0, 0, 0, 0)");」までのところが分かりません。
コメントの間違いがあると思いますのでそれのチェックも、お願いできればありがたいのですが、よろしくお願いいたします。

<!doctype html>
<html>
  <head>
    <title>Sample 8-1-11　反射効果</title>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function () {

        var context = document.getElementById("myCanvas").getContext("2d");
        var img = document.getElementById("upun");
        context.drawImage(img, 40, 14, 192, 144);	
        // Cancasに通常どおりにイメージを表示している
        // (x,y)=(40, 14)の左上から幅192, 高さ144で描画している
        // context.drawImage(画像,X1,Y1,W1,H1)
    	// 画像を指定した座標に、幅と高さも指定して描画する
    	// W1は画像を描画する際の幅、H1は描画する際の高さ
    	
        shadowImage(40, 162, 192, 144);
        // 反射イメージを表示するshadowImage関数を呼び出している
		
		context.globalCompositeOperation = "destination-over";
		// 描画先が不透明な場合、描画先を表示。それ以外は描画内容を表示する
		
        context.fillStyle = "black";
        context.fillRect(0, 0, 320, 240);

        function shadowImage(x, y, w, h) {
		// 高さを元のイメージの0.6倍にして、上下反転したイメージを表示します
          ｃontext.save();
          // save() メソッドは、現在の描画状態のコピーを、
          // 描画状態のスタックの最後に加えなければいけません。
          
          context.translate(x, y);
          context.scale(1, -0.6);
          //
          
          var grad = context.createLinearGradient(0, 0, 0, -h); // (x,y)=(0,0)から(x,y)=(0,ーh)までグラデーションする
          // JavaScriptの、CanvasRenderingContext2DオブジェクトのcreateLinearGradient()は、
          // キャンパスに線形的なグラデーションを描画するためのCanvasGradientオブジェクトを取得するプロパティです。
          // 引数には、開始点のX座標、Y座標と終了点のX座標、Y座標を示す4つの数値を指定します。

		  // 開始点と終了点によってグラデーションの範囲を決めるとともに「方角を決める」という点を意識すると分かりやすいと思います。
		  // このオブジェクトに別途、addColorStop()で色を加えることで線形グラデーションの材料が完成します。
		  // その材料は、値として、fill()などに指定できます。
          
          
          grad.addColorStop(0, "rgba(0, 0, 0, 0.6)");
          //  rgba()は、RGBAカラーモデルで色を指定する際に使用します。
		  // RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。 alphaは色の透明度を表します。
		  // RGBAカラーモデルで色を指定する際には、カンマ（ , ）区切りにした３つの数値でRGBの色を指定した後に、
		  // 数値で透明度を指定します。 RGBの色は0-255、または、0%-100%で指定します。
		  // 透明度は、0（完全に透明）～1（完全に不透明）の数値で指定します。
          // 色は黒で、透明度0.6,始点
          // イメージの上部 が不透明で

          grad.addColorStop(0.6, "rgba(0, 0, 0, 0)");
          // 色は黒で、透明度0 ,
          // イメージの下部 が透明で
          
          context.fillStyle = grad;
          context.fillRect(0, -h, w, h);
          // (x,y)=(0, -h),(x,y)=(0, h)まで下から上に描画する
          
          context.globalCompositeOperation = "source-atop";
          // 描画先と描画内容の両方が不透明な場合は描画内容を表示する
          // 描画先が不透明で、描画内容が透明な場合は描画先を表示する、それ以外は透明
          context.drawImage(img, 0, -h, w, h);
          // 描画は下から上にされる
          // (0, -h)から上に幅w, 高さhで描画される
          // 最初にｃontext.save()された描画から表示されるので、逆さに表示される
		
          context.restore();	
          // スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。	
		}
      };
    </script>
  
    <style type="text/css">
      #myCanvas { border: 1px solid black }
      #upun { display: none }
    </style>
    <canvas width="320" height="240" id="myCanvas">
      お使いのブラウザではCanvasを利用いただくことができません    
    </canvas><img id="upun" src="upun.png">
  </body>
</html>