APIには、線形グラデーションを作成するcreateLinearGradient()、円形グラデーションを作成するcreateRadialGradient()が用意されており、これらのメソッドを利用することで簡単に線や塗りにグラデーションを使用することができます。createLinearGradient()線形グラデーションを作成するには、createLinearGradient()を使用します。グラデーションの分岐点はaddColorStop()で指定します。第1引数は、分岐点の位置を0〜1の比率で指定し、第2引数で色を指定します。作成したグラデーションは、塗りや線のスタイルとして指定することができます。下記の例では、createLinearGradient()の戻り値であるCanvasGradientオブジェクトをfillStyleに指定し、矩形を描画しています。createRadialGradient()createRadialGradient()を使うと円形グラデーションを作成することができます。createRadialGradient()では、6つの引数でグラデーションを開始する円形と終了する円形を指定します。半径の順に指定します。グラデーションの分岐点に関しては、線形グラデーションの場合と同様にaddColorStop()で分岐点の位置と色を指定します。下記の例では、作成した円形グラデーションをstrokeStyleに指定してstroke()することにより、虹のような半円を描画しています。