実行結果

コード

var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
/* Imageオブジェクトを生成 */
var img = new Image();
img.src = "pattern.png?" + new Date().getTime();
/* 画像が読み込まれるのを待ってから処理を続行 */
img.onload = function() {
  ctx.beginPath();
  /* パターンを生成 */
  var ptn = ctx.createPattern(img, "");
  /* fillStyleにパターンをセット */
  ctx.fillStyle = ptn;
  /* 円を描く */
  ctx.arc(50, 50, 40, 0, 2 * Math.PI, false);
  ctx.fill();
}