createLinearGradient(x1,y1,x2,y2)：線形グラデーション。
引数は、グラデーションの始点(x1,y1) と終点(x2,y2) を表す
createRadialGradient(x1,y1,r1,x2,y2,r2)：円形グラデーション。
引数の最初の3つは座標(x1,y1) 半径 r1 の開始円を定義し、2つめは座標(x2,y2) 半径 r2 の終了円を定義する

addColorStop(position, color)：色を割り当てる。position は 0.0 から 1.0 の間の数値でなければならず、グラデーションの色の相対位置を定義する。
※例えばこれを 0.5 に設定すると色は正確にグラデーションの中心に置かれる。color 引数は CSS 色を表す文字列でなければならない(つまり #FFF、 rgba(0,0,0,1)、等)。

fillStyle：塗りつぶし形状向けに使われる現在のスタイル。
fillRect( x, y, w, h )：canvas 上の指定の矩形を、現在の塗りつぶしスタイルを使って塗りつぶす。
矩形の左上端の x 座標と y 座標。次の 2 つは、矩形の幅 w と 高さ h 。