APIには、drawImage()が用意されており、簡単にcanvasに画像を表示することができます。drawImage()には、HTMLImageElementだけでなく、HTMLCanvasElementやHTMLVideoElementを渡すこともできるため、うまく利用することで面白い表現ができそうです。CanvasPatternを作成することにより、CSSの背景画像のように画像を繰り返しパターンとして表示することもできます。drawImage()drawImage()は、第1引数で指定した画像をcanvasに表示します。y)座標、第4引数で画像の幅、第5引数で画像の高さを指定します。5引数は省略することができ、省略した場合はソースとなる画像の幅と高さになります。canvasに画像を表示する際の注意点は、画像の読み込み完了を待ってから処理をすることです。下記の例では、onloadで画像の読み込みが完了してから処理するようにしています。IEでは既にキャッシュされている画像はonloadが発生しないので、その対策として画像のURLにクエリーを付加しています。};};drawImage()で画像をトリミングして表示するdrawImage()は、引数を追加することで画像をトリミングして表示することができます。height)となります。height)となります。-100)の座標に幅と高さを200に拡大して表示しています。};};clip()で画像をクリッピングするdrawImage()では画像を矩形でしかトリミングできませんが、clip()では自由な形状のパスで画像をクリッピングできます。clip()は、画像だけでなく線や塗りもクリッピングすることができます。下記の例では、中心から半径100の円でクリッピング領域を作成し、その領域内に画像を表示しています。createPattern()createPattern()は、第1引数の画像の繰り返しパターンを作成し、CanvasPatternオブジェクトとして返します。"no-repeat"の中から指定します。作成したCanvasPatternは、線や塗りのスタイルとして指定することができます。下記の例では、作成したパターンを塗りのスタイルに指定し、矩形を描画しています。"repeat-y"に対応していない他、WindowsのChrome17.0で"repeat"以外の解釈がおかしい等、部分的に未対応のブラウザがあるので注意が必要です。