canvas 要素サンプル - パターン

実装はオプション。左上が no-repat、右上が repeat-x、左下が repat-y、右下が repeat です。

Firefox 1.5 系では全て no-repeat として扱われます。Firefox Trunk の実装でも仕様通りでは無い(特に no-repeat)と思います。ただ基準となる画像はrepeat-x、 repeat-y が正しく無いかもしれません。。。

• Bug 291049 - add patterns and gradients to <canvas>
• Bug 306881 - fix canvas pattern repeat attribute
• Bug 308929 - Using canvas createPattern only draws a single image and doesn't repeat it

Firefox Trunk での表示

仕様書通りでは無いと思う

コード

function draw() {
  var pttr = new Image();
  pttr.src = 'pattern.png';
  var pttr2 = new Image();
  pttr2.src = './pattern2.png';

  try {
    var ctx = document.getElementById('canvas').getContext('2d');
  } catch (ex) {}
  if(!ctx) return;

  ctx.lineWidth = 3;
  ctx.strokeStyle = ctx.createPattern(pttr2, 'repeat');

  ctx.fillStyle = ctx.createPattern(pttr, 'no-repeat');
  ctx.fillRect(10, 10, 100, 100);
  ctx.strokeRect(10, 10, 100, 100);

  ctx.fillStyle = ctx.createPattern(pttr, 'repeat-x');
  ctx.fillRect(160, 10, 100, 100);
  ctx.strokeRect(160, 10, 100, 100);

  ctx.fillStyle = ctx.createPattern(pttr, 'repeat-y');
  ctx.fillRect(10, 160, 100, 100);
  ctx.strokeRect(10, 160, 100, 100);

  ctx.fillStyle = ctx.createPattern(pttr, 'repeat');
  ctx.fillRect(160, 160, 100, 100);
  ctx.strokeRect(160, 160, 100, 100);
}