<canvas>要素では、グラデーションオブジェクトを作ることで、図形にグラデーションを指定することが出来ます。
グラデーションの種類は、後述の「線形グラデーション」と「円形グラデーション」の2種です。
グラデーションは、「fillStyle」や「strokeStyle」にて利用することが出来ます。

色の指定、追加には、「addColorStop」メソッドを使います。
※使い方は、「線形グラデーション」と「円形グラデーション」の例を参考にしてください。

addColorStop(offset, color)

グラデーション距離の割合 offset(0.0～1.0) において、colorで指定した色となるようにします。
colorは、CSSで指定できる 色名「white」、16進表記「#ffffff」、10進表記「rgb()」で指定できます。

線形グラデーションとは、直線方向にグラデーションをかけるものです。
よくドーム状のボタンイメージに使われるグラデーションです。

createLinearGradient(x0, y0, x1, y1)

座標(x0,y0)方向から、座標(x1,y1)方向に向けてかけるグラデーションオブジェクトを生成します。

/* 線形グラデーション */
var gradient = context.createLinearGradient(100,50,400,100);
gradient.addColorStop(0.0 , 'rgb(255,0,0)');	//開始は赤
gradient.addColorStop(0.5 , 'rgb(0,255,0)');	//途中は緑
gradient.addColorStop(1.0 , 'rgb(0,0,255)');	//最後は青
context.fillStyle = gradient;					//グラデーションを適用

円形グラデーションとは、同心円状にグラデーションをかけるものです。
よく光源イメージに使われるグラデーションです。

createRadialGradient(x0, y0, r0, x1, y1, r1)

座標(x0,y0)を中心に半径r0から、座標(x1,y1)を中心に半径r1に向けてかけるグラデーションオブジェクトを生成します。

/* 円形グラデーション */
var gradient = context.createRadialGradient(250,50,10,250,100,100);
gradient.addColorStop(0.0 , 'rgb(255,0,0)');	//開始は赤
gradient.addColorStop(0.5 , 'rgb(0,255,0)');	//途中は緑
gradient.addColorStop(1.0 , 'rgb(0,0,255)');	//最後は青
context.fillStyle = gradient;					//グラデーションを適用

グラデーションではありませんが、似たような使用方法として背景パターンを指定することが出来ます。
背景パターンには、<canvas>要素、<img>要素、<video>要素を背景ソースとして用います。

createPattern(image, repetition)

imageに背景ソース(<canvas>要素、<img>要素、<video>要素のいずれか)オブジェクトを指定します。
repetitionには、繰り返し方法を指定します。
繰り返し方法は、repeat(縦横両方に)、repeat-x(縦方向に)、repeat-y(横方向に)、no-repeat(繰り返さない)のいずれかです。

//パターンイメージ
var img = new Image();			//img要素を内部的に作る
img.src = '0007-bg01.jpg';		//img要素のsrcを代入
//画像を読み込んだとき、パターンを適用した図形を表示
img.onload = function(){
	var pattern = context.createPattern(img, 'repeat');
	context.fillStyle = pattern;	//パターンを適用
	
	/* 四角 */
	context.fillRect(100,50,300,100);	//四角を描く。
}